wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add PostCSS text color utilities

Browse source
This commit is contained in:
Adam Wathan 2017-08-27 13:33:07 -04:00
parent c9e4652065
commit f0dda61e76
7 changed files with 943 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/_less/generators/text-colors.less → src/_less/generators/done/text-colors.less
View file

69
src/_less/utilities/text.less
View file

@ -1,74 +1,6 @@
// Default line height
@line-height: 1.5;
// Colors
@text-light: @color-white;
@text-light-soft: fade(@color-white, 60%);
@text-light-softer: fade(@color-white, 45%);
@text-light-softest: fade(@color-white, 35%);
@text-dark: @color-grey-900;
@text-dark-soft: @color-grey-700;
@text-dark-softer: @color-grey-600;
@text-dark-softest: @color-grey-500;
@text-colors:
'light' @text-light,
'light-soft' @text-light-soft,
'light-softer' @text-light-softer,
'light-softest' @text-light-softest,
'dark' @text-dark,
'dark-soft' @text-dark-soft,
'dark-softer' @text-dark-softer,
'dark-softest' @text-dark-softest,
'red-dark' @color-red-dark,
'red' @color-red,
'red-light' @color-red-light,
'red-lightest' @color-red-lightest,
'orange-dark' @color-orange-dark,
'orange' @color-orange,
'orange-light' @color-orange-light,
'orange-lightest' @color-orange-lightest,
'yellow-dark' @color-yellow-dark,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'yellow-lightest' @color-yellow-lightest,
'green-dark' @color-green-dark,
'green' @color-green,
'green-light' @color-green-light,
'green-lightest' @color-green-lightest,
'teal-dark' @color-teal-dark,
'teal' @color-teal,
'teal-light' @color-teal-light,
'teal-lightest' @color-teal-lightest,
'blue-dark' @color-blue-dark,
'blue' @color-blue,
'blue-light' @color-blue-light,
'blue-lightest' @color-blue-lightest,
'indigo-dark' @color-indigo-dark,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'indigo-lightest' @color-indigo-lightest,
'purple-dark' @color-purple-dark,
'purple' @color-purple,
'purple-light' @color-purple-light,
'purple-lightest' @color-purple-lightest,
'pink-dark' @color-pink-dark,
'pink' @color-pink,
'pink-light' @color-pink-light,
'pink-lightest' @color-pink-lightest,
;
// Line heights
@leading-scale:
'none' 1,
@ -84,7 +16,6 @@
'wide' 0.1em,
;
.define-text-colors(@text-colors; @screens);
.define-text-hover-colors(@text-colors; @screens);
.define-leading-utilities(@leading-scale; @screens);
.define-tracking-utilities(@tracking-scale; @screens);

50
src/defaultConfig.js
View file

@ -75,7 +75,55 @@ export default {
'regular': 400,
'medium': 600,
'bold': 700,
}
},
colors: [
{
'light': 'white',
'light-soft': 'rgba(255, 255, 255, 60%)',
'light-softer': 'rgba(255, 255, 255, 45%)',
'light-softest': 'rgba(255, 255, 255, 35%)',
'dark': 'grey-900',
'dark-soft': 'grey-700',
'dark-softer': 'grey-600',
'dark-softest': 'grey-500',
},
'red-dark',
'red',
'red-light',
'red-lightest',
'orange-dark',
'orange',
'orange-light',
'orange-lightest',
'yellow-dark',
'yellow',
'yellow-light',
'yellow-lightest',
'green-dark',
'green',
'green-light',
'green-lightest',
'teal-dark',
'teal',
'teal-light',
'teal-lightest',
'blue-dark',
'blue',
'blue-light',
'blue-lightest',
'indigo-dark',
'indigo',
'indigo-light',
'indigo-lightest',
'purple-dark',
'purple',
'purple-light',
'purple-lightest',
'pink-dark',
'pink',
'pink-light',
'pink-lightest',
]
},
backgroundColors: [
{

11
src/generators/textColors.js Normal file
View file

@ -0,0 +1,11 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import normalizeColorList from '../util/normalizeColorList'
export default function ({ colors, text }) {
return _.map(normalizeColorList(text.colors, colors), (color, modifier) => {
return defineClass(`text-${modifier}`, {
'color': color,
})
})
}

2
src/lib/generateUtilities.js
View file

@ -3,6 +3,7 @@ import responsive from '../util/responsive'
import textSizes from '../generators/textSizes'
import textWeights from '../generators/textWeights'
import textFonts from '../generators/textFonts'
import textColors from '../generators/textColors'
import backgroundColors from '../generators/backgroundColors'
import backgroundSize from '../generators/backgroundSize'
import borderWidths from '../generators/borderWidths'
@ -24,6 +25,7 @@ export default function(options) {
textSizes(options),
textWeights(options),
textFonts(options),
textColors(options),
backgroundColors(options),
backgroundSize(options),
borderWidths(options),