From e6814fdb91170c5b1d3c5d4bfab27f15ee43ab1a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 4 Dec 2017 09:23:37 -0500 Subject: [PATCH 01/10] WIP --- docs/source/docs/colors.blade.md | 100 ++++++++++++++++++++++++++++++- docs/tailwind.js | 31 ++++++++++ docs/webpack.mix.js | 2 +- 3 files changed, 130 insertions(+), 3 deletions(-) diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md index e4ca285b7..65ce58554 100644 --- a/docs/source/docs/colors.blade.md +++ b/docs/source/docs/colors.blade.md @@ -10,8 +10,8 @@ Developing an organized, consistent and beautiful color palette is critical to t To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project. -
-
+
+
Grey
@@ -58,6 +58,102 @@ To get you started, we've provided a generous palette of great looking colors th
+ +
+
+
+
Grey
+
+ Base + {{ strtoupper($page->config['colors']['new-grey']) }} +
+
+
+ White + {{ strtoupper($page->config['colors']['new-white']) }} +
+
+ Lightest + {{ strtoupper($page->config['colors']['new-grey-lightest']) }} +
+
+ Lighter + {{ strtoupper($page->config['colors']['new-grey-lighter']) }} +
+
+ Light + {{ strtoupper($page->config['colors']['new-grey-light']) }} +
+
+ Base + {{ strtoupper($page->config['colors']['new-grey']) }} +
+
+ Dark + {{ strtoupper($page->config['colors']['new-grey-dark']) }} +
+
+ Darker + {{ strtoupper($page->config['colors']['new-grey-darker']) }} +
+
+ Darkest + {{ strtoupper($page->config['colors']['new-grey-darkest']) }} +
+
+ Black + {{ strtoupper($page->config['colors']['new-black']) }} +
+
+
+ +
+
+
+
Grey
+
+ Base + {{ strtoupper($page->config['colors']['grey']) }} +
+
+
+ White + {{ strtoupper($page->config['colors']['white']) }} +
+
+ Lightest + {{ strtoupper($page->config['colors']['grey-lightest']) }} +
+
+ Lighter + {{ strtoupper($page->config['colors']['grey-lighter']) }} +
+
+ Light + {{ strtoupper($page->config['colors']['grey-light']) }} +
+
+ Base + {{ strtoupper($page->config['colors']['grey']) }} +
+
+ Dark + {{ strtoupper($page->config['colors']['grey-dark']) }} +
+
+ Darker + {{ strtoupper($page->config['colors']['grey-darker']) }} +
+
+ Darkest + {{ strtoupper($page->config['colors']['grey-darkest']) }} +
+
+ Black + {{ strtoupper($page->config['colors']['black']) }} +
+
+
diff --git a/docs/tailwind.js b/docs/tailwind.js index 2d635826d..b85377805 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -1,6 +1,37 @@ var config = require('../defaultConfig')() config.colors = Object.assign(config.colors, { + 'new-white': 'hsl(0, 0%, 100%)', + 'new-grey-lightest': 'hsl(200, 25%, 98%)', + 'new-grey-lighter': 'hsl(200, 33%, 96%)', + 'new-grey-light': 'hsl(200, 25%, 88%)', + 'new-grey': 'hsl(200, 14%, 66%)', + 'new-grey-dark': 'hsl(200, 10%, 49%)', + 'new-grey-darker': 'hsl(200, 13%, 40%)', + 'new-grey-darkest': 'hsl(200, 15%, 25%)', + 'new-black': 'hsl(200, 16%, 16%)', + + 'new-white': 'hsl(0, 0%, 100%)', + 'new-grey-lightest': 'hsl(200, 12%, 98%)', + 'new-grey-lighter': 'hsl(200, 12%, 96%)', + 'new-grey-light': 'hsl(200, 12%, 88%)', + 'new-grey': 'hsl(200, 12%, 66%)', + 'new-grey-dark': 'hsl(200, 12%, 49%)', + 'new-grey-darker': 'hsl(200, 13%, 40%)', + 'new-grey-darkest': 'hsl(200, 15%, 25%)', + 'new-black': 'hsl(200, 16%, 16%)', + + 'new-white': 'hsl(200, 0%, 100%)', + 'new-grey-lightest': 'hsl(200, 35%, 98%)', + 'new-grey-lighter': 'hsl(200, 30%, 96%)', + 'new-grey-light': 'hsl(200, 20%, 88%)', + 'new-grey': 'hsl(200, 16%, 73%)', + 'new-grey-dark': 'hsl(200, 11%, 55%)', + 'new-grey-darker': 'hsl(200, 12%, 41%)', + 'new-grey-darkest': 'hsl(200, 15%, 26%)', + 'new-black': 'hsl(200, 16%, 16%)', + + 'slate-darker': '#212b35', 'slate-dark': '#404e5c', 'slate': '#647382', diff --git a/docs/webpack.mix.js b/docs/webpack.mix.js index cabb9a984..921a84c3e 100644 --- a/docs/webpack.mix.js +++ b/docs/webpack.mix.js @@ -7,7 +7,7 @@ const tailwind = require('./../lib/index.js') const config = require('./../defaultConfig.js') const fs = require('fs') -fs.writeFileSync('./tailwind.json', JSON.stringify(config())) +fs.writeFileSync('./tailwind.json', JSON.stringify(require('./tailwind.js'))) const env = argv.e || argv.env || 'local' const plugins = [ From cbfcd92ae8b379a8b48272a8303a6da17c2a71a5 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 4 Dec 2017 10:30:27 -0500 Subject: [PATCH 02/10] WIP --- docs/source/docs/colors.blade.md | 16 ++++++++-------- docs/tailwind.js | 18 +++++++++--------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md index 65ce58554..df1c039e7 100644 --- a/docs/source/docs/colors.blade.md +++ b/docs/source/docs/colors.blade.md @@ -120,35 +120,35 @@ To get you started, we've provided a generous palette of great looking colors th White {{ strtoupper($page->config['colors']['white']) }}
-
+
Lightest {{ strtoupper($page->config['colors']['grey-lightest']) }}
-
+
Lighter {{ strtoupper($page->config['colors']['grey-lighter']) }}
-
+
Light {{ strtoupper($page->config['colors']['grey-light']) }}
-
+
Base {{ strtoupper($page->config['colors']['grey']) }}
-
+
Dark {{ strtoupper($page->config['colors']['grey-dark']) }}
-
+
Darker {{ strtoupper($page->config['colors']['grey-darker']) }}
-
+
Darkest {{ strtoupper($page->config['colors']['grey-darkest']) }}
-
+
Black {{ strtoupper($page->config['colors']['black']) }}
diff --git a/docs/tailwind.js b/docs/tailwind.js index b85377805..db5582b85 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -21,15 +21,15 @@ config.colors = Object.assign(config.colors, { 'new-grey-darkest': 'hsl(200, 15%, 25%)', 'new-black': 'hsl(200, 16%, 16%)', - 'new-white': 'hsl(200, 0%, 100%)', - 'new-grey-lightest': 'hsl(200, 35%, 98%)', - 'new-grey-lighter': 'hsl(200, 30%, 96%)', - 'new-grey-light': 'hsl(200, 20%, 88%)', - 'new-grey': 'hsl(200, 16%, 73%)', - 'new-grey-dark': 'hsl(200, 11%, 55%)', - 'new-grey-darker': 'hsl(200, 12%, 41%)', - 'new-grey-darkest': 'hsl(200, 15%, 26%)', - 'new-black': 'hsl(200, 16%, 16%)', + 'new-white': 'hsl(208, 0%, 100%)', + 'new-grey-lightest': 'hsl(208, 35%, 98%)', + 'new-grey-lighter': 'hsl(208, 30%, 96%)', + 'new-grey-light': 'hsl(208, 20%, 88%)', + 'new-grey': 'hsl(208, 16%, 73%)', + 'new-grey-dark': 'hsl(208, 11%, 55%)', + 'new-grey-darker': 'hsl(208, 12%, 41%)', + 'new-grey-darkest': 'hsl(208, 15%, 26%)', + 'new-black': 'hsl(208, 16%, 16%)', 'slate-darker': '#212b35', From 1d5852dd1b5d401e2213fef592eb4ad3bc900981 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 4 Dec 2017 13:01:01 -0500 Subject: [PATCH 03/10] I think these greys are better? Who knows. --- docs/source/docs/colors.blade.md | 8 +++--- docs/tailwind.js | 49 +++++++++++++++----------------- 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md index df1c039e7..338ea20ad 100644 --- a/docs/source/docs/colors.blade.md +++ b/docs/source/docs/colors.blade.md @@ -10,8 +10,8 @@ Developing an organized, consistent and beautiful color palette is critical to t To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project. -
-
+
+
Grey
@@ -59,7 +59,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Grey
@@ -107,7 +107,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Grey
diff --git a/docs/tailwind.js b/docs/tailwind.js index db5582b85..60344d141 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -1,37 +1,16 @@ var config = require('../defaultConfig')() config.colors = Object.assign(config.colors, { - 'new-white': 'hsl(0, 0%, 100%)', - 'new-grey-lightest': 'hsl(200, 25%, 98%)', - 'new-grey-lighter': 'hsl(200, 33%, 96%)', - 'new-grey-light': 'hsl(200, 25%, 88%)', - 'new-grey': 'hsl(200, 14%, 66%)', - 'new-grey-dark': 'hsl(200, 10%, 49%)', - 'new-grey-darker': 'hsl(200, 13%, 40%)', - 'new-grey-darkest': 'hsl(200, 15%, 25%)', - 'new-black': 'hsl(200, 16%, 16%)', - - 'new-white': 'hsl(0, 0%, 100%)', - 'new-grey-lightest': 'hsl(200, 12%, 98%)', - 'new-grey-lighter': 'hsl(200, 12%, 96%)', - 'new-grey-light': 'hsl(200, 12%, 88%)', - 'new-grey': 'hsl(200, 12%, 66%)', - 'new-grey-dark': 'hsl(200, 12%, 49%)', - 'new-grey-darker': 'hsl(200, 13%, 40%)', - 'new-grey-darkest': 'hsl(200, 15%, 25%)', - 'new-black': 'hsl(200, 16%, 16%)', - 'new-white': 'hsl(208, 0%, 100%)', 'new-grey-lightest': 'hsl(208, 35%, 98%)', - 'new-grey-lighter': 'hsl(208, 30%, 96%)', + 'new-grey-lighter': 'hsl(208, 33%, 96%)', 'new-grey-light': 'hsl(208, 20%, 88%)', - 'new-grey': 'hsl(208, 16%, 73%)', - 'new-grey-dark': 'hsl(208, 11%, 55%)', - 'new-grey-darker': 'hsl(208, 12%, 41%)', - 'new-grey-darkest': 'hsl(208, 15%, 26%)', + 'new-grey': 'hsl(208, 16%, 76%)', + 'new-grey-dark': 'hsl(208, 12%, 58%)', + 'new-grey-darker': 'hsl(208, 12%, 43%)', + 'new-grey-darkest': 'hsl(208, 15%, 28%)', 'new-black': 'hsl(208, 16%, 16%)', - 'slate-darker': '#212b35', 'slate-dark': '#404e5c', 'slate': '#647382', @@ -49,6 +28,24 @@ config.colors = Object.assign(config.colors, { 'tailwind-teal-dark': '#2f8696', }) +config.colors = Object.assign(config.colors, { + // 'slate-darker': config.colors['new-black'], + // 'slate-dark': config.colors['new-grey-darkest'], + // 'slate': config.colors['new-grey-darker'], + // 'slate-light': config.colors['new-grey-dark'], + // 'slate-lighter': config.colors['new-grey'], + + // 'smoke-darker': config.colors['new-grey-dark'], + // 'smoke-dark': config.colors['new-grey'], + // 'smoke': config.colors['new-grey-light'], + // 'smoke-light': config.colors['new-grey-lighter'], + // 'smoke-lighter': config.colors['new-grey-lightest'], + + 'tailwind-teal-light': '#5ebcca', + 'tailwind-teal': '#44a8b3', + 'tailwind-teal-dark': '#2f8696', +}) + config.fonts = { 'sans': 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', From c4ee2e5e6af8f8edff10a1e4412d085b7ad3d1de Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 7 Dec 2017 10:23:51 -0500 Subject: [PATCH 04/10] WIP --- docs/source/docs/colors.blade.md | 223 +++++++++++++++---------------- docs/tailwind.js | 10 ++ 2 files changed, 117 insertions(+), 116 deletions(-) diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md index 338ea20ad..b921f4a01 100644 --- a/docs/source/docs/colors.blade.md +++ b/docs/source/docs/colors.blade.md @@ -10,150 +10,141 @@ Developing an organized, consistent and beautiful color palette is critical to t To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project. -
-
+
+
-
Grey
-
- Base - {{ strtoupper($page->config['colors']['grey']) }} -
-
-
- White - {{ strtoupper($page->config['colors']['white']) }} -
-
- Lightest - {{ strtoupper($page->config['colors']['grey-lightest']) }} -
-
- Lighter - {{ strtoupper($page->config['colors']['grey-lighter']) }} -
-
- Light - {{ strtoupper($page->config['colors']['grey-light']) }} -
-
- Base - {{ strtoupper($page->config['colors']['grey']) }} -
-
- Dark - {{ strtoupper($page->config['colors']['grey-dark']) }} -
-
- Darker - {{ strtoupper($page->config['colors']['grey-darker']) }} -
-
- Darkest - {{ strtoupper($page->config['colors']['grey-darkest']) }} -
-
- Black - {{ strtoupper($page->config['colors']['black']) }} -
-
-
- -
-
-
-
Grey
-
- Base - {{ strtoupper($page->config['colors']['new-grey']) }} -
-
-
- White - {{ strtoupper($page->config['colors']['new-white']) }} -
-
- Lightest - {{ strtoupper($page->config['colors']['new-grey-lightest']) }} -
-
- Lighter - {{ strtoupper($page->config['colors']['new-grey-lighter']) }} -
-
- Light - {{ strtoupper($page->config['colors']['new-grey-light']) }} -
-
- Base - {{ strtoupper($page->config['colors']['new-grey']) }} -
-
- Dark - {{ strtoupper($page->config['colors']['new-grey-dark']) }} -
-
- Darker - {{ strtoupper($page->config['colors']['new-grey-darker']) }} -
-
- Darkest - {{ strtoupper($page->config['colors']['new-grey-darkest']) }} -
-
- Black - {{ strtoupper($page->config['colors']['new-black']) }} -
-
-
- -
-
-
-
Grey
+
Current Greys
Base {{ strtoupper($page->config['colors']['grey']) }}
- White + White {{ strtoupper($page->config['colors']['white']) }}
-
- Lightest +
+ Lightest {{ strtoupper($page->config['colors']['grey-lightest']) }}
-
- Lighter +
+ Lighter {{ strtoupper($page->config['colors']['grey-lighter']) }}
-
- Light +
+ Light {{ strtoupper($page->config['colors']['grey-light']) }}
-
- Base +
+ Base {{ strtoupper($page->config['colors']['grey']) }}
-
- Dark +
+ Dark {{ strtoupper($page->config['colors']['grey-dark']) }}
-
- Darker +
+ Darker {{ strtoupper($page->config['colors']['grey-darker']) }}
-
- Darkest +
+ Darkest {{ strtoupper($page->config['colors']['grey-darkest']) }}
-
- Black +
+ Black {{ strtoupper($page->config['colors']['black']) }}
+ +
+
+
+
Proposed Greys
+
+ Base + {{ strtoupper($page->config['colors']['new-grey']) }} +
+
+
+ White + {{ strtoupper($page->config['colors']['new-white']) }} +
+
+ Lightest + {{ strtoupper($page->config['colors']['new-grey-lightest']) }} +
+
+ Lighter + {{ strtoupper($page->config['colors']['new-grey-lighter']) }} +
+
+ Light + {{ strtoupper($page->config['colors']['new-grey-light']) }} +
+
+ Base + {{ strtoupper($page->config['colors']['new-grey']) }} +
+
+ Dark + {{ strtoupper($page->config['colors']['new-grey-dark']) }} +
+
+ Darker + {{ strtoupper($page->config['colors']['new-grey-darker']) }} +
+
+ Darkest + {{ strtoupper($page->config['colors']['new-grey-darkest']) }} +
+
+ Black + {{ strtoupper($page->config['colors']['new-black']) }} +
+
+
+ +
+
+
+
Legacy Greys
+
+ Base + {{ strtoupper($page->config['colors']['grey']) }} +
+
+
+ White +
+
+ Smoke Lighter +
+
+ Smoke Light +
+
+ Smoke +
+
+ Smoke Dark / Slate Lighter +
+
+ Smoke Darker / Slate Light +
+
+ Slate +
+
+ Slate Dark +
+
+ Slate Darker +
+
+
diff --git a/docs/tailwind.js b/docs/tailwind.js index 60344d141..0b82054a6 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -41,6 +41,16 @@ config.colors = Object.assign(config.colors, { // 'smoke-light': config.colors['new-grey-lighter'], // 'smoke-lighter': config.colors['new-grey-lightest'], + // 'white': config.colors['new-white'], + // 'grey-lightest': config.colors['new-grey-lightest'], + // 'grey-lighter': config.colors['new-grey-lighter'], + // 'grey-light': config.colors['new-grey-light'], + // 'grey': config.colors['new-grey'], + // 'grey-dark': config.colors['new-grey-dark'], + // 'grey-darker': config.colors['new-grey-darker'], + // 'grey-darkest': config.colors['new-grey-darkest'], + // 'black': config.colors['new-black'], + 'tailwind-teal-light': '#5ebcca', 'tailwind-teal': '#44a8b3', 'tailwind-teal-dark': '#2f8696', From dc3419cc11d436a1a7ea93b79d4cd61651416266 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 9 Dec 2017 09:19:25 -0500 Subject: [PATCH 05/10] Replace smoke/slate references --- docs/source/_assets/js/app.js | 2 +- .../js/components/ResponsiveCodeSample.vue | 16 +- docs/source/_assets/less/markdown.less | 28 +-- docs/source/_assets/less/prism.less | 2 +- docs/source/_layouts/documentation.blade.php | 20 +- docs/source/_layouts/master.blade.php | 2 +- docs/source/_partials/class-table.blade.php | 6 +- .../_partials/customized-config.blade.php | 4 +- docs/source/docs/border-width.blade.md | 10 +- docs/source/docs/colors.blade.md | 74 ++----- docs/source/docs/configuration.blade.md | 4 +- docs/source/docs/container.blade.md | 22 +- .../docs/flexbox-align-content.blade.md | 122 +++++------ docs/source/docs/flexbox-align-items.blade.md | 82 ++++---- docs/source/docs/flexbox-align-self.blade.md | 82 ++++---- docs/source/docs/flexbox-direction.blade.md | 74 +++---- docs/source/docs/flexbox-display.blade.md | 56 ++--- .../docs/flexbox-flex-grow-shrink.blade.md | 170 +++++++-------- .../docs/flexbox-justify-content.blade.md | 82 ++++---- docs/source/docs/flexbox-wrapping.blade.md | 66 +++--- docs/source/docs/forms.blade.md | 2 +- docs/source/docs/installation.blade.md | 18 +- docs/source/docs/opacity.blade.md | 12 +- docs/source/docs/overflow.blade.md | 38 ++-- docs/source/docs/positioning.blade.md | 194 +++++++++--------- docs/source/docs/shadows.blade.md | 12 +- docs/source/docs/spacing.blade.md | 12 +- docs/source/docs/visibility.blade.md | 16 +- docs/source/docs/what-is-tailwind.blade.md | 40 ++-- docs/source/index.blade.php | 2 +- docs/tailwind.js | 46 +---- 31 files changed, 620 insertions(+), 696 deletions(-) diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js index d2adbcc46..dd82a04d1 100644 --- a/docs/source/_assets/js/app.js +++ b/docs/source/_assets/js/app.js @@ -12,7 +12,7 @@ const app = new Vue({ }) Prism.highlightAll() -anchors.options = { placement: 'left', class: 'text-slate-light' } +anchors.options = { placement: 'left', class: 'text-grey-dark' } anchors.add() // Add shortcut to search input when pressing the "/" key diff --git a/docs/source/_assets/js/components/ResponsiveCodeSample.vue b/docs/source/_assets/js/components/ResponsiveCodeSample.vue index 11b12757d..fbe31a1f7 100644 --- a/docs/source/_assets/js/components/ResponsiveCodeSample.vue +++ b/docs/source/_assets/js/components/ResponsiveCodeSample.vue @@ -1,30 +1,30 @@