From b4738aa9b7dd22230f5eeb9ef0fbaa8441976dd4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 26 Oct 2017 15:59:49 -0400 Subject: [PATCH] Update colors to Steve's new palette --- defaultConfig.js | 114 ++++++++----- docs/source/workflow/color-palette.md | 234 ++++++++++++++++++++++++++ docs/tailwind.js | 57 +------ 3 files changed, 305 insertions(+), 100 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 7e9b69885..93ebdd092 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -44,8 +44,6 @@ View the full documentation at https://tailwindcss.com. */ var colors = { - 'black': '#000000', - 'white': '#ffffff', 'transparent': 'transparent', 'slate-darker': '#212b35', @@ -60,59 +58,87 @@ var colors = { 'smoke-light': '#f0f2f5', 'smoke-lighter': '#f7f9fa', - 'red-darker': '#960f0d', - 'red-dark': '#d43633', - 'red': '#f25451', - 'red-light': '#fa8785', - 'red-lighter': '#fff1f0', + 'black': '#222b2f', + 'grey-darkest': '#364349', + 'grey-darker': '#596a73', + 'grey-dark': '#70818a', + 'grey': '#9babb4', + 'grey-light': '#dae4e9', + 'grey-lighter': '#f3f7f9', + 'grey-lightest': '#fafcfc', + 'white': '#ffffff', - 'orange-darker': '#875200', - 'orange-dark': '#f29500', - 'orange': '#ffb82b', - 'orange-light': '#ffd685', - 'orange-lighter': '#fff8eb', + 'red-darkest': '#610b08', + 'red-darker': '#a61611', + 'red-dark': '#cc1f1a', + 'red': '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', - 'yellow-darker': '#966100', - 'yellow-dark': '#ffc400', - 'yellow': '#ffe14a', - 'yellow-light': '#ffea83', - 'yellow-lighter': '#fffbe5', + 'orange-darkest': '#622c06', + 'orange-darker': '#ad560e', + 'orange-dark': '#de751f', + 'orange': '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', - 'green-darker': '#056619', - 'green-dark': '#34ae4c', - 'green': '#57d06f', - 'green-light': '#b1f3be', - 'green-lighter': '#eefff1', + 'yellow-darkest': '#453411', + 'yellow-darker': '#d9b111', + 'yellow-dark': '#f2d024', + 'yellow': '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', - 'teal-darker': '#025654', - 'teal-dark': '#249e9a', + 'green-darkest': '#032d19', + 'green-darker': '#0e693e', + 'green-dark': '#1f9d55', + 'green': '#38c172', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#298f8b', + 'teal-dark': '#38a89d', 'teal': '#4dc0b5', - 'teal-light': '#9eebe4', - 'teal-lighter': '#e8fdfa', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', - 'blue-darker': '#154267', - 'blue-dark': '#3687c8', - 'blue': '#4aa2ea', - 'blue-light': '#acdaff', - 'blue-lighter': '#f1f9ff', + 'blue-darkest': '#05233b', + 'blue-darker': '#225e8f', + 'blue-dark': '#2779bd', + 'blue': '#3490dc', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', - 'indigo-darker': '#242b54', - 'indigo-dark': '#4957a5', + 'indigo-darkest': '#191e38', + 'indigo-darker': '#3c488c', + 'indigo-dark': '#5661b3', 'indigo': '#6574cd', - 'indigo-light': '#bcc5fb', - 'indigo-lighter': '#f4f5ff', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', - 'purple-darker': '#331f56', - 'purple-dark': '#714cb4', - 'purple': '#976ae6', - 'purple-light': '#ceb3ff', - 'purple-lighter': '#f7f3ff', + 'purple-darkest': '#1f133f', + 'purple-darker': '#5d3aac', + 'purple-dark': '#794acf', + 'purple': '#9561e2', + 'purple-light': '#a779e9', + 'purple-lighter': '#d6bbfc', + 'purple-lightest': '#f3ebff', - 'pink-darker': '#6b2052', - 'pink-dark': '#d84f7d', + 'pink-darkest': '#45051e', + 'pink-darker': '#b71b5e', + 'pink-dark': '#eb5286', 'pink': '#f66d9b', - 'pink-light': '#ffa5c3', - 'pink-lighter': '#fdf2f5', + 'pink-light': '#fa7ea8', + 'pink-lighter': '#ffbbca', + 'pink-lightest': '#ffebef', } module.exports = { diff --git a/docs/source/workflow/color-palette.md b/docs/source/workflow/color-palette.md index eeb7a7a72..2f7cce3a8 100644 --- a/docs/source/workflow/color-palette.md +++ b/docs/source/workflow/color-palette.md @@ -8,3 +8,237 @@ title: "Color Palette" - Explain default color palette - Document how to customize your color palette, using regular JS features in your config file to avoid duplication, merging colors, etc. - Talk about naming, how it's easy to use color-based names or hierarchy-based names, whatever floats your boat + +
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Red +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Orange +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Yellow +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+ +
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Green +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Teal +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Blue +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+ +
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Indigo +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Purple +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
+
+
+ Lightest +
+
+ Lighter +
+
+ Light +
+
+ Pink +
+
+ Dark +
+
+ Darker +
+
+ Darkest +
+
+
+
diff --git a/docs/tailwind.js b/docs/tailwind.js index 17abe61e9..4b5e6e304 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -1,8 +1,7 @@ var config = require('../defaultConfig') config.colors = { - 'black': '#000000', - 'white': '#ffffff', + ...config.colors, 'transparent': 'transparent', 'slate-darker': '#212b35', @@ -16,60 +15,6 @@ config.colors = { 'smoke': '#dfe3e8', 'smoke-light': 'hsl(200, 33%, 96%)', 'smoke-lighter': 'hsl(200, 25%, 98%)', - - 'red-darker': '#960f0d', - 'red-dark': '#d43633', - 'red': '#f25451', - 'red-light': '#fa8785', - 'red-lighter': '#fff1f0', - - 'orange-darker': '#875200', - 'orange-dark': '#f29500', - 'orange': '#ffb82b', - 'orange-light': '#ffd685', - 'orange-lighter': '#fff8eb', - - 'yellow-darker': '#966100', - 'yellow-dark': '#ffc400', - 'yellow': '#ffe14a', - 'yellow-light': '#ffea83', - 'yellow-lighter': '#fffbe5', - - 'green-darker': '#056619', - 'green-dark': '#34ae4c', - 'green': '#57d06f', - 'green-light': '#b1f3be', - 'green-lighter': '#eefff1', - - 'teal-darker': '#025654', - 'teal-dark': '#249e9a', - 'teal': '#4dc0b5', - 'teal-light': '#9eebe4', - 'teal-lighter': '#e8fdfa', - - 'blue-darker': '#154267', - 'blue-dark': '#317af6', - 'blue': '#4aa2ea', - 'blue-light': '#acdaff', - 'blue-lighter': '#f1f9ff', - - 'indigo-darker': '#242b54', - 'indigo-dark': '#4957a5', - 'indigo': '#6574cd', - 'indigo-light': '#bcc5fb', - 'indigo-lighter': '#f4f5ff', - - 'purple-darker': '#331f56', - 'purple-dark': '#714cb4', - 'purple': '#976ae6', - 'purple-light': '#ceb3ff', - 'purple-lighter': '#f7f3ff', - - 'pink-darker': '#6b2052', - 'pink-dark': '#d84f7d', - 'pink': '#f66d9b', - 'pink-light': '#ffa5c3', - 'pink-lighter': '#fdf2f5', } config.fonts = {