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',