Skip to content
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

Closed
wants to merge 46 commits into from
Closed

Color palettes #18462

wants to merge 46 commits into from

Conversation

mdo
Copy link
Member

@mdo mdo commented Dec 8, 2015

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.

screen shot 2015-12-07 at 11 17 03 pm

screen shot 2015-12-07 at 11 21 00 pm

@cvrebert
Copy link
Collaborator

cvrebert commented Dec 8, 2015

Are we going to define $brand-* in terms of this palette?

@mdo
Copy link
Member Author

mdo commented Dec 8, 2015

Are we going to define $brand-* in terms of this palette?

Yeah, still have to work out the relationship there.

More todos:

  • Figure out how to handle $brand-* vars
  • Sass the shit out of this
  • Maybe use Jekyll data collections for spitting out the HTML?
  • Peep color contrast of the 500s
  • Update gray scale to use the 500 as a base

@cvrebert cvrebert added this to the v4.0.0-alpha.3 milestone Dec 8, 2015
@lachlanjc
Copy link
Contributor

@mdo Do we want these classes available for anyone to use on their Bootstrap site, or just show them inside the docs?

@cvrebert
Copy link
Collaborator

cvrebert commented Dec 9, 2015

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;

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

@lachlanjc
Copy link
Contributor

👍

@patrickhlauke
Copy link
Member

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).

@patrickhlauke
Copy link
Member

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)

@mdo
Copy link
Member Author

mdo commented Apr 18, 2016

@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 v4-dev, I don't see obvious changes that could be the culprit.

@cvrebert
Copy link
Collaborator

@mdo Sauce Labs was suffering from an incident; see js-cookie/js-cookie#179
It's supposedly been resolved now, so the build should succeed if you retry.

@patrickhlauke
Copy link
Member

dropping this in as related https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3#.3pkskno6n

@cvrebert cvrebert mentioned this pull request Jun 25, 2016
@mdo mdo modified the milestones: v4.0.0-alpha.3, v4.0.0-alpha.4 Jul 20, 2016
@mdo mdo modified the milestones: v4.0.0-alpha.5, v4.0.0-alpha.6 Oct 19, 2016
mdo added a commit that referenced this pull request Dec 20, 2016
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.
@mdo mdo mentioned this pull request Dec 20, 2016
mdo added a commit that referenced this pull request Dec 21, 2016
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.
@mdo
Copy link
Member Author

mdo commented Dec 21, 2016

Added color variables in #21378. Going to punt on the rest until after stable v4.

@mdo mdo closed this Dec 21, 2016
@mdo mdo removed this from the v4.0.0-alpha.6 milestone Dec 21, 2016
mdo added a commit that referenced this pull request May 1, 2017
— 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.
@mdo mdo mentioned this pull request May 1, 2017
4 tasks
@mdo mdo deleted the v4-palettes branch October 31, 2017 21:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants