-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Color palettes #18462
Color palettes #18462
Conversation
Are we going to define |
Yeah, still have to work out the relationship there. More todos:
|
@mdo Do we want these classes available for anyone to use on their Bootstrap site, or just show them inside the docs? |
Given the number of colors, exposing them as classes seems like it'd be excessive/bloaty. |
@@ -6,12 +6,12 @@ | |||
padding: 4rem 0; | |||
margin-top: 4rem; | |||
font-size: 85%; | |||
background-color: #f7f7f7; | |||
background-color: $gray-100; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Properties should be ordered padding, margin-top, font-size, text-align, background-color
👍 |
sure, happy to sit tight once yours has merged...but forewarning you that regardless of wcag contrast ratios, subjectively i find some of the color combos quite washed out and weak even for "normal" users (eg the breadcrumb styles and the secondary outline button, which has various issues from others filed against it). |
btw, speaking of color contrast etc, I do like what Dropbox did in their documentation/style guide with regards to calling out the colors that ARE in fact WCAG 2.0 compliant. see http://dropbox.github.io/scooter/functions.html#colors (which incorporates my recent PR dropbox/scooter#31) |
@cvrebert Any idea what's up with Travis? I see some PRs passing, but CI seems to be super flakey and looking at the history of even |
@mdo Sauce Labs was suffering from an incident; see js-cookie/js-cookie#179 |
dropping this in as related https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3#.3pkskno6n |
This pulls in some changes from #18462 to include a set of generic color variables. It doesn't include a Sass map for generating the theme colors yet, since we can't easily do that for all components, but does give a few more color choices to folks and an easier way to customize.
This pulls in some changes from #18462 to include a set of generic color variables. It doesn't include a Sass map for generating the theme colors yet, since we can't easily do that for all components, but does give a few more color choices to folks and an easier way to customize.
Added color variables in #21378. Going to punt on the rest until after stable v4. |
— Scales back the plans for a full color system in v4.0.0 to instead build on a core set of colors. No shades or tints are coming just yet, but soon. — Rearranges the variables file a bit to clean things up. — Drops all `$brand-` color vars for `${color}-` vars for less abstraction in the colors setup. This differs from #18462 in that we don't reassign the `${color}` vars into a Sass map with different names; it's now `$red` and `map-get($colors, red)`. — Updates tables, list groups, alerts, form validation, and some docs CSS to use the new color variables.
Motivated by #18189.
This implements a basic color palette using color functions for each of our base colors, including gray. It's intended to give us and users more flexibility and granularity in their color choices and increase the level of customization throughout the project. As with the original mentioned PR, this is super heavily pulled from Google's design docs—big fan of that stuff.
Here's how it looks right now.