archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Use generic generators for text colors

Browse Source
This commit is contained in:
Adam Wathan 2017-08-03 15:23:49 -04:00
parent 6cf77cfeed
commit bde4d1c983
3 changed files with 25 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/generators/class-variants.less
View File

@ -1,4 +1,9 @@
.generate-utility-variant(@utility; @variant; @ruleset) {
.generate-utility-variant(@utility; @variant; @ruleset) when (extract(@variant, 1) = default) {
@__variant-value: @variant;
.define-selector(~"@{utility}"; @ruleset);
}
.generate-utility-variant(@utility; @variant; @ruleset) when not (extract(@variant, 1) = default) {
@variant-name: extract(@variant, 1);
@__variant-value: @variant;
.define-selector(~"@{utility}-@{variant-name}"; @ruleset);
@ -18,7 +23,12 @@
.generate-utility-variants(@utility; @variants; @ruleset; @i + 1);
}
.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) {
.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) when (extract(@variant, 1) = default) {
@__variant-value: @variant;
.define-selector(~"@{screen-name}\:@{utility}"; @ruleset);
}
.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) when not (extract(@variant, 1) = default) {
@variant-name: extract(@variant, 1);
@__variant-value: @variant;
.define-selector(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);

32
src/generators/text-colors.less
View File

@ -1,27 +1,17 @@
.generate-text-color-utility(@name; @variant; @color) when (@variant = default) {
.define-selector(~"text-@{name}"; { color: @color; });
.define-text-color(@color-name; @variants) {
.generate-utility-variants(~"text-@{color-name}"; @variants; {
font-size: extract(@__variant-value, 2);
});
}
.generate-text-color-utility(@name; @variant; @color) when not (@variant = default) {
.define-selector(~"text-@{name}-@{variant}"; { color: @color; });
.define-text-color(@color-name; @variants; none) {
.define-text-color(@color-name; @variants);
}
.generate-text-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
@variant-name: extract(@color-variants, 1);
@variant-color: extract(@color-variants, 2);
.generate-text-color-utility(@color-name; @variant-name; @variant-color);
.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; {
font-size: extract(@__variant-value, 2);
});
}
.generate-text-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
@variant: extract(@color-variants, @i);
@variant-name: extract(@variant, 1);
@variant-color: extract(@variant, 2);
.generate-text-color-utility(@color-name; @variant-name; @variant-color);
.generate-text-color-utilities(@color-name; @color-variants; @i + 1);
}
.define-text-color(@color-name; @color-variants) {
.generate-text-color-utilities(@color-name; @color-variants);
}

19
src/utilities/text.less
View File

@ -68,14 +68,14 @@
'soft' @text-light-soft,
'softer' @text-light-softer,
'softest' @text-light-softest
;);
; @screens);
.define-text-color(dark;
default @text-dark,
'soft' @text-dark-soft,
'softer' @text-dark-softer,
'softest' @text-dark-softest
;);
; @screens);
// Line heights
.leading-none { line-height: 1; }
@ -115,21 +115,6 @@
}
.responsive({
&text-xs { .text-xs; }
&text-sm { .text-sm; }
&text-base { .text-base; }
&text-lg { .text-lg; }
&text-xl { .text-xl; }
&text-2xl { .text-2xl; }
&text-3xl { .text-3xl; }
&text-light { .text-light; }
&text-light-soft { .text-light-soft; }
&text-light-softer { .text-light-softer; }
&text-light-softest { .text-light-softest; }
&text-dark { .text-dark; }
&text-dark-soft { .text-dark-soft; }
&text-dark-softer { .text-dark-softer; }
&text-dark-softest { .text-dark-softest; }
&leading-none { .leading-none; }
&leading-tight { .leading-tight; }
&leading-normal { .leading-normal; }