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

Define all text colors at once to prevent responsive order bugs

Browse source
This commit is contained in:
Adam Wathan 2017-08-03 21:37:12 -04:00
parent fcdd29b92f
commit a750de4c5a
3 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

22
docs/source/_assets/less/main.less
View file

@ -19,11 +19,23 @@ a {
}
}
.define-text-color('primary';
default #3498DB,
'light' lighten(#3498DB, 25%),
'dark' #2980B9
;);
@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,
'primary' #3498DB,
'primary-light' lighten(#3498DB, 25%),
'primary-dark' #2980B9,
;
@bg-colors:
'light' hsl(0, 0%, 100%),

14
src/generators/text-colors.less
View file

@ -1,16 +1,16 @@
.define-text-color(@color-name; @variants) {
.generate-utility-variants(~"text-@{color-name}"; @variants; {
.define-text-colors(@variants) {
.generate-utility-variants('text'; @variants; {
color: extract(@__variant-value, 2);
});
}
.define-text-color(@color-name; @variants; none) {
.define-text-color(@color-name; @variants);
.define-text-colors(@variants; none) {
.define-text-colors(@variants);
}
.define-text-color(@color-name; @variants; @screens) when not (@screens = none) {
.define-text-color(@color-name; @variants);
.generate-responsive-utility-variants(~"text-@{color-name}"; @variants; @screens; {
.define-text-colors(@variants; @screens) when not (@screens = none) {
.define-text-colors(@variants);
.generate-responsive-utility-variants('text'; @variants; @screens; {
color: extract(@__variant-value, 2);
});
}

23
src/utilities/text.less
View file

@ -63,19 +63,18 @@
; @screens);
// Colors
.define-text-color(light;
default @text-light,
'soft' @text-light-soft,
'softer' @text-light-softer,
'softest' @text-light-softest
; @screens);
@text-colors:
'light' @text-light,
'light-soft' @text-light-soft,
'light-softer' @text-light-softer,
'light-softest' @text-light-softest,
.define-text-color(dark;
default @text-dark,
'soft' @text-dark-soft,
'softer' @text-dark-softer,
'softest' @text-dark-softest
; @screens);
'dark' @text-dark,
'dark-soft' @text-dark-soft,
'dark-softer' @text-dark-softer,
'dark-softest' @text-dark-softest,
;
.define-text-colors(@text-colors; @screens);
// Line heights
.leading-none { line-height: 1; }