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

Generate all background colors at once

Browse Source
This commit is contained in:
Adam Wathan 2017-08-03 21:01:22 -04:00
parent bc3664f1a1
commit baa7450e25
2 changed files with 16 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/generators/backgrounds.less
View File

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

27
src/utilities/backgrounds.less
View File

@ -1,20 +1,11 @@
@bg-light: hsl(0, 0%, 100%);
@bg-light-soft: hsl(0, 0%, 98%);
@bg-light-softer: hsl(0, 0%, 96%);
@bg-colors:
'light' hsl(0, 0%, 100%),
'light-soft' hsl(0, 0%, 98%),
'light-softer' hsl(0, 0%, 96%),
@bg-dark: hsl(0, 0%, 33%);
@bg-dark-soft: hsl(0, 0%, 42%);
@bg-dark-softer: hsl(0, 0%, 52%);
'dark' hsl(0, 0%, 33%),
'dark-soft' hsl(0, 0%, 42%),
'dark-softer' hsl(0, 0%, 52%),
;
@bg-light-scale:
default @bg-light,
'soft' @bg-light-soft,
'softer' @bg-light-softer;
@bg-dark-scale:
default @bg-dark,
'soft' @bg-dark-soft,
'softer' @bg-dark-softer;
.define-bg-color('light'; @bg-light-scale; @screens);
.define-bg-color('dark'; @bg-dark-scale; @screens);
.define-bg-colors(@bg-colors; @screens);