Remove slate color entirely, and set new default border color

This commit is contained in:
Jonathan Reinink 2017-10-31 20:27:19 -04:00
parent 54e65e6ed2
commit cacb048883
3 changed files with 108 additions and 108 deletions

View File

@ -1614,23 +1614,23 @@ button,
}
.border {
border: 1px solid undefined;
border: 1px solid #dae4e9;
}
.border-t {
border-top: 1px solid undefined;
border-top: 1px solid #dae4e9;
}
.border-r {
border-right: 1px solid undefined;
border-right: 1px solid #dae4e9;
}
.border-b {
border-bottom: 1px solid undefined;
border-bottom: 1px solid #dae4e9;
}
.border-l {
border-left: 1px solid undefined;
border-left: 1px solid #dae4e9;
}
.border-0 {
@ -1654,63 +1654,63 @@ button,
}
.border-2 {
border: 2px solid undefined;
border: 2px solid #dae4e9;
}
.border-t-2 {
border-top: 2px solid undefined;
border-top: 2px solid #dae4e9;
}
.border-r-2 {
border-right: 2px solid undefined;
border-right: 2px solid #dae4e9;
}
.border-b-2 {
border-bottom: 2px solid undefined;
border-bottom: 2px solid #dae4e9;
}
.border-l-2 {
border-left: 2px solid undefined;
border-left: 2px solid #dae4e9;
}
.border-4 {
border: 4px solid undefined;
border: 4px solid #dae4e9;
}
.border-t-4 {
border-top: 4px solid undefined;
border-top: 4px solid #dae4e9;
}
.border-r-4 {
border-right: 4px solid undefined;
border-right: 4px solid #dae4e9;
}
.border-b-4 {
border-bottom: 4px solid undefined;
border-bottom: 4px solid #dae4e9;
}
.border-l-4 {
border-left: 4px solid undefined;
border-left: 4px solid #dae4e9;
}
.border-8 {
border: 8px solid undefined;
border: 8px solid #dae4e9;
}
.border-t-8 {
border-top: 8px solid undefined;
border-top: 8px solid #dae4e9;
}
.border-r-8 {
border-right: 8px solid undefined;
border-right: 8px solid #dae4e9;
}
.border-b-8 {
border-bottom: 8px solid undefined;
border-bottom: 8px solid #dae4e9;
}
.border-l-8 {
border-left: 8px solid undefined;
border-left: 8px solid #dae4e9;
}
.border-transparent,
@ -4542,23 +4542,23 @@ button,
}
.sm\:border {
border: 1px solid undefined;
border: 1px solid #dae4e9;
}
.sm\:border-t {
border-top: 1px solid undefined;
border-top: 1px solid #dae4e9;
}
.sm\:border-r {
border-right: 1px solid undefined;
border-right: 1px solid #dae4e9;
}
.sm\:border-b {
border-bottom: 1px solid undefined;
border-bottom: 1px solid #dae4e9;
}
.sm\:border-l {
border-left: 1px solid undefined;
border-left: 1px solid #dae4e9;
}
.sm\:border-0 {
@ -4582,63 +4582,63 @@ button,
}
.sm\:border-2 {
border: 2px solid undefined;
border: 2px solid #dae4e9;
}
.sm\:border-t-2 {
border-top: 2px solid undefined;
border-top: 2px solid #dae4e9;
}
.sm\:border-r-2 {
border-right: 2px solid undefined;
border-right: 2px solid #dae4e9;
}
.sm\:border-b-2 {
border-bottom: 2px solid undefined;
border-bottom: 2px solid #dae4e9;
}
.sm\:border-l-2 {
border-left: 2px solid undefined;
border-left: 2px solid #dae4e9;
}
.sm\:border-4 {
border: 4px solid undefined;
border: 4px solid #dae4e9;
}
.sm\:border-t-4 {
border-top: 4px solid undefined;
border-top: 4px solid #dae4e9;
}
.sm\:border-r-4 {
border-right: 4px solid undefined;
border-right: 4px solid #dae4e9;
}
.sm\:border-b-4 {
border-bottom: 4px solid undefined;
border-bottom: 4px solid #dae4e9;
}
.sm\:border-l-4 {
border-left: 4px solid undefined;
border-left: 4px solid #dae4e9;
}
.sm\:border-8 {
border: 8px solid undefined;
border: 8px solid #dae4e9;
}
.sm\:border-t-8 {
border-top: 8px solid undefined;
border-top: 8px solid #dae4e9;
}
.sm\:border-r-8 {
border-right: 8px solid undefined;
border-right: 8px solid #dae4e9;
}
.sm\:border-b-8 {
border-bottom: 8px solid undefined;
border-bottom: 8px solid #dae4e9;
}
.sm\:border-l-8 {
border-left: 8px solid undefined;
border-left: 8px solid #dae4e9;
}
.sm\:border-transparent,
@ -7471,23 +7471,23 @@ button,
}
.md\:border {
border: 1px solid undefined;
border: 1px solid #dae4e9;
}
.md\:border-t {
border-top: 1px solid undefined;
border-top: 1px solid #dae4e9;
}
.md\:border-r {
border-right: 1px solid undefined;
border-right: 1px solid #dae4e9;
}
.md\:border-b {
border-bottom: 1px solid undefined;
border-bottom: 1px solid #dae4e9;
}
.md\:border-l {
border-left: 1px solid undefined;
border-left: 1px solid #dae4e9;
}
.md\:border-0 {
@ -7511,63 +7511,63 @@ button,
}
.md\:border-2 {
border: 2px solid undefined;
border: 2px solid #dae4e9;
}
.md\:border-t-2 {
border-top: 2px solid undefined;
border-top: 2px solid #dae4e9;
}
.md\:border-r-2 {
border-right: 2px solid undefined;
border-right: 2px solid #dae4e9;
}
.md\:border-b-2 {
border-bottom: 2px solid undefined;
border-bottom: 2px solid #dae4e9;
}
.md\:border-l-2 {
border-left: 2px solid undefined;
border-left: 2px solid #dae4e9;
}
.md\:border-4 {
border: 4px solid undefined;
border: 4px solid #dae4e9;
}
.md\:border-t-4 {
border-top: 4px solid undefined;
border-top: 4px solid #dae4e9;
}
.md\:border-r-4 {
border-right: 4px solid undefined;
border-right: 4px solid #dae4e9;
}
.md\:border-b-4 {
border-bottom: 4px solid undefined;
border-bottom: 4px solid #dae4e9;
}
.md\:border-l-4 {
border-left: 4px solid undefined;
border-left: 4px solid #dae4e9;
}
.md\:border-8 {
border: 8px solid undefined;
border: 8px solid #dae4e9;
}
.md\:border-t-8 {
border-top: 8px solid undefined;
border-top: 8px solid #dae4e9;
}
.md\:border-r-8 {
border-right: 8px solid undefined;
border-right: 8px solid #dae4e9;
}
.md\:border-b-8 {
border-bottom: 8px solid undefined;
border-bottom: 8px solid #dae4e9;
}
.md\:border-l-8 {
border-left: 8px solid undefined;
border-left: 8px solid #dae4e9;
}
.md\:border-transparent,
@ -10400,23 +10400,23 @@ button,
}
.lg\:border {
border: 1px solid undefined;
border: 1px solid #dae4e9;
}
.lg\:border-t {
border-top: 1px solid undefined;
border-top: 1px solid #dae4e9;
}
.lg\:border-r {
border-right: 1px solid undefined;
border-right: 1px solid #dae4e9;
}
.lg\:border-b {
border-bottom: 1px solid undefined;
border-bottom: 1px solid #dae4e9;
}
.lg\:border-l {
border-left: 1px solid undefined;
border-left: 1px solid #dae4e9;
}
.lg\:border-0 {
@ -10440,63 +10440,63 @@ button,
}
.lg\:border-2 {
border: 2px solid undefined;
border: 2px solid #dae4e9;
}
.lg\:border-t-2 {
border-top: 2px solid undefined;
border-top: 2px solid #dae4e9;
}
.lg\:border-r-2 {
border-right: 2px solid undefined;
border-right: 2px solid #dae4e9;
}
.lg\:border-b-2 {
border-bottom: 2px solid undefined;
border-bottom: 2px solid #dae4e9;
}
.lg\:border-l-2 {
border-left: 2px solid undefined;
border-left: 2px solid #dae4e9;
}
.lg\:border-4 {
border: 4px solid undefined;
border: 4px solid #dae4e9;
}
.lg\:border-t-4 {
border-top: 4px solid undefined;
border-top: 4px solid #dae4e9;
}
.lg\:border-r-4 {
border-right: 4px solid undefined;
border-right: 4px solid #dae4e9;
}
.lg\:border-b-4 {
border-bottom: 4px solid undefined;
border-bottom: 4px solid #dae4e9;
}
.lg\:border-l-4 {
border-left: 4px solid undefined;
border-left: 4px solid #dae4e9;
}
.lg\:border-8 {
border: 8px solid undefined;
border: 8px solid #dae4e9;
}
.lg\:border-t-8 {
border-top: 8px solid undefined;
border-top: 8px solid #dae4e9;
}
.lg\:border-r-8 {
border-right: 8px solid undefined;
border-right: 8px solid #dae4e9;
}
.lg\:border-b-8 {
border-bottom: 8px solid undefined;
border-bottom: 8px solid #dae4e9;
}
.lg\:border-l-8 {
border-left: 8px solid undefined;
border-left: 8px solid #dae4e9;
}
.lg\:border-transparent,
@ -13329,23 +13329,23 @@ button,
}
.xl\:border {
border: 1px solid undefined;
border: 1px solid #dae4e9;
}
.xl\:border-t {
border-top: 1px solid undefined;
border-top: 1px solid #dae4e9;
}
.xl\:border-r {
border-right: 1px solid undefined;
border-right: 1px solid #dae4e9;
}
.xl\:border-b {
border-bottom: 1px solid undefined;
border-bottom: 1px solid #dae4e9;
}
.xl\:border-l {
border-left: 1px solid undefined;
border-left: 1px solid #dae4e9;
}
.xl\:border-0 {
@ -13369,63 +13369,63 @@ button,
}
.xl\:border-2 {
border: 2px solid undefined;
border: 2px solid #dae4e9;
}
.xl\:border-t-2 {
border-top: 2px solid undefined;
border-top: 2px solid #dae4e9;
}
.xl\:border-r-2 {
border-right: 2px solid undefined;
border-right: 2px solid #dae4e9;
}
.xl\:border-b-2 {
border-bottom: 2px solid undefined;
border-bottom: 2px solid #dae4e9;
}
.xl\:border-l-2 {
border-left: 2px solid undefined;
border-left: 2px solid #dae4e9;
}
.xl\:border-4 {
border: 4px solid undefined;
border: 4px solid #dae4e9;
}
.xl\:border-t-4 {
border-top: 4px solid undefined;
border-top: 4px solid #dae4e9;
}
.xl\:border-r-4 {
border-right: 4px solid undefined;
border-right: 4px solid #dae4e9;
}
.xl\:border-b-4 {
border-bottom: 4px solid undefined;
border-bottom: 4px solid #dae4e9;
}
.xl\:border-l-4 {
border-left: 4px solid undefined;
border-left: 4px solid #dae4e9;
}
.xl\:border-8 {
border: 8px solid undefined;
border: 8px solid #dae4e9;
}
.xl\:border-t-8 {
border-top: 8px solid undefined;
border-top: 8px solid #dae4e9;
}
.xl\:border-r-8 {
border-right: 8px solid undefined;
border-right: 8px solid #dae4e9;
}
.xl\:border-b-8 {
border-bottom: 8px solid undefined;
border-bottom: 8px solid #dae4e9;
}
.xl\:border-l-8 {
border-left: 8px solid undefined;
border-left: 8px solid #dae4e9;
}
.xl\:border-transparent,

View File

@ -395,7 +395,7 @@ module.exports = {
|
*/
borderColors: Object.assign({ default: colors['slate-lighter'] }, colors),
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
/*

View File

@ -425,11 +425,11 @@ By default Tailwind defines the entire color palette in a `colors` object at the
var colors = {
'transparent': 'transparent',
'slate-darker': '#212b35',
'slate-dark': '#404e5c',
'slate': '#647382',
'slate-light': '#919eab',
'slate-lighter': '#c5ced6',
'black': '#222b2f',
'grey-darkest': '#364349',
'grey-darker': '#596a73',
'grey-dark': '#70818a',
'grey': '#9babb4',
// ...
}
@ -438,7 +438,7 @@ module.exports = {
colors: colors,
textColors: colors,
backgroundColors: colors,
borderColors: Object.assign({ default: colors['slate-lighter'] }, colors),
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
// ...
}
@ -447,7 +447,7 @@ module.exports = {
You'll notice above that the color palette is also assigned to the `colors` key of your Tailwind config. This makes it easy to access them in your custom CSS using the `config()` function. For example:
```css
.error { color: config('colors.slate-darker') }
.error { color: config('colors.grey-darker') }
```
<!-- Document how to customize your color palette, using regular JS features in your config file to avoid duplication, merging colors, etc. -->