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

Replace 0.x colors with rough draft of 1.0 colors #737

Merged
merged 4 commits into from Mar 14, 2019

Conversation

Projects
None yet
5 participants
@adamwathan
Copy link
Member

commented Mar 10, 2019

This PR replaces the current 7-shade-darkest-to-lightest color system with a new 9-shade-numeric color system, where 100 is the lightest shade, and 900 is the darkest shade.

  colors: {
    // ...
-   'red-darkest': '#3b0d0c',
-   'red-darker': '#621b18',
-   'red-dark': '#cc1f1a',
-   'red': '#e3342f',
-   'red-light': '#ef5753',
-   'red-lighter': '#f9acaa',
-   'red-lightest': '#fcebea',
+   red: {
+     100: '#fff5f5',
+     200: '#fee3e3',
+     300: '#febcbc',
+     400: '#fd9292',
+     500: '#f95e5f',
+     600: '#ec454e',
+     700: '#dc3448',
+     800: '#b4203b',
+     900: '#801b33',
+   },
    // ...
  }

The old black color has also been replaced with real black (#000), as previously we were using it sort of like a hack to fit one additional grey shade, since 7 wasn't quite enough. Now that we have 9 shades per color, we have room for proper black.

These colors will absolutely 100% change, but the names are at least correct, and the colors are probably ~close. Hoping to finish fine-tuning these by the end of the week.

Examples of things I already know we need to adjust:

  • The darkest purple and pink are too saturated.
  • Some of the middle shades (500) are a little washed out, red for example. Needs to feel a little more "solid".
  • Indigo-300 and Blue-300 are a bit dark, need to make them feel more balanced/harmonious with the other 300s
  • ...probably a bunch more.

Rough new color palette for Tailwind 1.0

@lukebennett88

This comment has been minimized.

Copy link

commented Mar 12, 2019

Is there a good reason why the colours have a 3 digit number instead of 1 (other than that material design does it that way?)
I feel like the extra zeros are unnecessary.

@sandren

This comment has been minimized.

Copy link

commented Mar 12, 2019

Is there a good reason why the colours have a 3 digit number instead of 1 (other than that material design does it that way?)

It's the same scale that vanilla CSS already uses for font weights and it makes it easier to introduce intermediate values if necessary.

@lukebennett88

This comment has been minimized.

Copy link

commented Mar 12, 2019

Cool makes sense @sandren 😊

@adamwathan adamwathan force-pushed the rough-new-colors branch from dc6db43 to 05eec7e Mar 13, 2019

@adamwathan

This comment has been minimized.

Copy link
Member Author

commented Mar 13, 2019

Updated the colors again to match our latest revision, I think we're "done" but will see how they fair in the wild during our brief alpha period that should hopefully start today :)

adamwathan added some commits Mar 9, 2019

Replace 0.x colors with rough draft of 1.0 colors
These will 100% change, but the names are at least correct, and the colors are probably ~close. Hoping to finish fine-tuning these by the end of the week.

@adamwathan adamwathan force-pushed the rough-new-colors branch from 05eec7e to 364d871 Mar 14, 2019

@adamwathan adamwathan merged commit adda3e6 into next Mar 14, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@adamwathan adamwathan deleted the rough-new-colors branch Mar 14, 2019

@brandontamm

This comment has been minimized.

Copy link

commented Mar 22, 2019

Nice!! I really like this approach! Now I've just got to swap some things :)

@danfascia

This comment has been minimized.

Copy link

commented Mar 27, 2019

Also the system used by material design which gives it further familiarity. I like the numerical weighting system.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.