From 06360a809402da266d0c169388092dcafca1ccd9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 2 Aug 2017 08:51:24 -0400 Subject: [PATCH] More generator work About to go down dark path of parameterized mixins. --- src/generators.less | 24 +++- .../{borders.less => border-colors.less} | 0 src/generators/text-colors.less | 27 +++++ src/generators/text-sizes.less | 25 ++++ src/generators/text-weights.less | 23 ++++ src/utilities/spacing.less | 111 +++++++----------- src/utilities/text.less | 52 ++++---- 7 files changed, 173 insertions(+), 89 deletions(-) rename src/generators/{borders.less => border-colors.less} (100%) create mode 100644 src/generators/text-colors.less create mode 100644 src/generators/text-sizes.less create mode 100644 src/generators/text-weights.less diff --git a/src/generators.less b/src/generators.less index 60b75093b..8e6678c7a 100644 --- a/src/generators.less +++ b/src/generators.less @@ -1,2 +1,24 @@ +.apply-match(@map; @search; @ruleset) { + @current: extract(extract(@map, 1), 1); + .apply-match(@map; @search; @current; @ruleset; 1); +} + +.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) { + @current: extract(extract(@map, @i + 1), 1); + .apply-match(@map; @search; @current; @ruleset; @i + 1); +} + +.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) { + & { + @__match: extract(extract(@map, @i), 2); + @ruleset(); + } +} + @import "generators/backgrounds"; -@import "generators/borders"; + +@import "generators/border-colors"; + +@import "generators/text-colors"; +@import "generators/text-weights"; +@import "generators/text-sizes"; diff --git a/src/generators/borders.less b/src/generators/border-colors.less similarity index 100% rename from src/generators/borders.less rename to src/generators/border-colors.less diff --git a/src/generators/text-colors.less b/src/generators/text-colors.less new file mode 100644 index 000000000..436460b12 --- /dev/null +++ b/src/generators/text-colors.less @@ -0,0 +1,27 @@ +.generate-text-color-utility(@name; @variant; @color) when (@variant = default) { + .text-@{name} { color: @color; } +} + +.generate-text-color-utility(@name; @variant; @color) when not (@variant = default) { + .text-@{name}-@{variant} { color: @color; } +} + +.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); +} + +.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); +} diff --git a/src/generators/text-sizes.less b/src/generators/text-sizes.less new file mode 100644 index 000000000..2758dfe6e --- /dev/null +++ b/src/generators/text-sizes.less @@ -0,0 +1,25 @@ +.generate-text-size-utility(@variant; @size) { + .text-@{variant} { + font-size: @size; + } +} + +.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) { + @name: extract(@size-variants, 1); + @size: extract(@size-variants, 2); + + .generate-text-size-utility(@name; @size); +} + +.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) { + @variant: extract(@size-variants, @i); + @name: extract(@variant, 1); + @size: extract(@variant, 2); + + .generate-text-size-utility(@name; @size); + .generate-text-size-utilities(@size-variants; @i + 1); +} + +.define-text-sizes(@size-variants) { + .generate-text-size-utilities(@size-variants); +} diff --git a/src/generators/text-weights.less b/src/generators/text-weights.less new file mode 100644 index 000000000..348fef173 --- /dev/null +++ b/src/generators/text-weights.less @@ -0,0 +1,23 @@ +.generate-weight-utility(@variant; @weight) { + .text-@{variant} { font-weight: @weight; } +} + +.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 1) { + @name: extract(@weight-variants, 1); + @weight: extract(@weight-variants, 2); + + .generate-weight-utility(@name; @weight); +} + +.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 2) { + @variant: extract(@weight-variants, @i); + @name: extract(@variant, 1); + @weight: extract(@variant, 2); + + .generate-weight-utility(@name; @weight); + .generate-weight-utilities(@weight-variants; @i + 1); +} + +.define-text-weights(@weight-variants) { + .generate-weight-utilities(@weight-variants); +} diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less index e802d784c..ceb42de52 100644 --- a/src/utilities/spacing.less +++ b/src/utilities/spacing.less @@ -34,49 +34,28 @@ 14 @spacer-14, 15 @spacer-15; -.apply-match(@map; @search; @ruleset) { - @current: extract(extract(@map, 1), 1); - .apply-match(@map; @search; @current; @ruleset; 1); -} - -.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) { - @current: extract(extract(@map, @i + 1), 1); - .apply-match(@map; @search; @current; @ruleset; @i + 1); -} - -.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) { - & { - @__spacer-size: extract(extract(@map, @i), 2); - @ruleset(); - } -} - -.apply-spacer(@search; @ruleset) { - .apply-match(@spacer-map; @search; @ruleset); -} - -.pt(@spacer) { .apply-spacer(@spacer, { padding-top: @__spacer-size; }); } -.pr(@spacer) { .apply-spacer(@spacer, { padding-right: @__spacer-size; }); } -.pb(@spacer) { .apply-spacer(@spacer, { padding-bottom: @__spacer-size; }); } -.pl(@spacer) { .apply-spacer(@spacer, { padding-left: @__spacer-size; }); } +.pt(@spacer) { .apply-match(@spacer-map, @spacer, { padding-top: @__match; }); } +.pr(@spacer) { .apply-match(@spacer-map, @spacer, { padding-right: @__match; }); } +.pb(@spacer) { .apply-match(@spacer-map, @spacer, { padding-bottom: @__match; }); } +.pl(@spacer) { .apply-match(@spacer-map, @spacer, { padding-left: @__match; }); } .py(@spacer) { - .apply-spacer(@spacer, { - padding-top: @__spacer-size; - padding-bottom: @__spacer-size; + .apply-match(@spacer-map, @spacer, { + padding-top: @__match; + padding-bottom: @__match; }); } .px(@spacer) { - .apply-spacer(@spacer, { - padding-right: @__spacer-size; - padding-left: @__spacer-size; + .apply-match(@spacer-map, @spacer, { + padding-right: @__match; + padding-left: @__match; }); } .p(@spacer) { - .apply-spacer(@spacer, { - padding-top: @__spacer-size; - padding-right: @__spacer-size; - padding-bottom: @__spacer-size; - padding-left: @__spacer-size; + .apply-match(@spacer-map, @spacer, { + padding-top: @__match; + padding-right: @__match; + padding-bottom: @__match; + padding-left: @__match; }); } @@ -147,29 +126,29 @@ .generate-responsive-padding-utilities(@i + 1); } -.mt(@spacer) { .apply-spacer(@spacer, { margin-top: @__spacer-size; }); } +.mt(@spacer) { .apply-match(@spacer-map, @spacer, { margin-top: @__match; }); } -.mr(@spacer) { .apply-spacer(@spacer, { margin-right: @__spacer-size; }); } -.mb(@spacer) { .apply-spacer(@spacer, { margin-bottom: @__spacer-size; }); } -.ml(@spacer) { .apply-spacer(@spacer, { margin-left: @__spacer-size; }); } +.mr(@spacer) { .apply-match(@spacer-map, @spacer, { margin-right: @__match; }); } +.mb(@spacer) { .apply-match(@spacer-map, @spacer, { margin-bottom: @__match; }); } +.ml(@spacer) { .apply-match(@spacer-map, @spacer, { margin-left: @__match; }); } .my(@spacer) { - .apply-spacer(@spacer, { - margin-top: @__spacer-size; - margin-bottom: @__spacer-size; + .apply-match(@spacer-map, @spacer, { + margin-top: @__match; + margin-bottom: @__match; }); } .mx(@spacer) { - .apply-spacer(@spacer, { - margin-right: @__spacer-size; - margin-left: @__spacer-size; + .apply-match(@spacer-map, @spacer, { + margin-right: @__match; + margin-left: @__match; }); } .m(@spacer) { - .apply-spacer(@spacer, { - margin-top: @__spacer-size; - margin-right: @__spacer-size; - margin-bottom: @__spacer-size; - margin-left: @__spacer-size; + .apply-match(@spacer-map, @spacer, { + margin-top: @__match; + margin-right: @__match; + margin-bottom: @__match; + margin-left: @__match; }); } @@ -246,29 +225,29 @@ .generate-responsive-margin-utilities(@i + 1); } -.pull-t(@spacer) { .apply-spacer(@spacer, { margin-top: ~"-@{__spacer-size}"; }); } +.pull-t(@spacer) { .apply-match(@spacer-map, @spacer, { margin-top: ~"-@{__match}"; }); } -.pull-r(@spacer) { .apply-spacer(@spacer, { margin-right: ~"-@{__spacer-size}"; }); } -.pull-b(@spacer) { .apply-spacer(@spacer, { margin-bottom: ~"-@{__spacer-size}"; }); } -.pull-l(@spacer) { .apply-spacer(@spacer, { margin-left: ~"-@{__spacer-size}"; }); } +.pull-r(@spacer) { .apply-match(@spacer-map, @spacer, { margin-right: ~"-@{__match}"; }); } +.pull-b(@spacer) { .apply-match(@spacer-map, @spacer, { margin-bottom: ~"-@{__match}"; }); } +.pull-l(@spacer) { .apply-match(@spacer-map, @spacer, { margin-left: ~"-@{__match}"; }); } .pull-y(@spacer) { - .apply-spacer(@spacer, { - margin-top: ~"-@{__spacer-size}"; - margin-bottom: ~"-@{__spacer-size}"; + .apply-match(@spacer-map, @spacer, { + margin-top: ~"-@{__match}"; + margin-bottom: ~"-@{__match}"; }); } .pull-x(@spacer) { - .apply-spacer(@spacer, { - margin-right: ~"-@{__spacer-size}"; - margin-left: ~"-@{__spacer-size}"; + .apply-match(@spacer-map, @spacer, { + margin-right: ~"-@{__match}"; + margin-left: ~"-@{__match}"; }); } .pull(@spacer) { - .apply-spacer(@spacer, { - margin-top: ~"-@{__spacer-size}"; - margin-right: ~"-@{__spacer-size}"; - margin-bottom: ~"-@{__spacer-size}"; - margin-left: ~"-@{__spacer-size}"; + .apply-match(@spacer-map, @spacer, { + margin-top: ~"-@{__match}"; + margin-right: ~"-@{__match}"; + margin-bottom: ~"-@{__match}"; + margin-left: ~"-@{__match}"; }); } diff --git a/src/utilities/text.less b/src/utilities/text.less index 39dbafa58..832027311 100644 --- a/src/utilities/text.less +++ b/src/utilities/text.less @@ -35,31 +35,39 @@ // Sizes -.text-xs { font-size: @font-size-xs; } -.text-sm { font-size: @font-size-sm; } -.text-base { font-size: @font-size-base; } -.text-lg { font-size: @font-size-lg; } -.text-xl { font-size: @font-size-xl; } -.text-2xl { font-size: @font-size-2xl; } -.text-3xl { font-size: @font-size-3xl; } +.define-text-sizes( + xs @font-size-xs, + sm @font-size-sm, + base @font-size-base, + lg @font-size-lg, + xl @font-size-xl, + 2xl @font-size-2xl, + 3xl @font-size-3xl +;); // Weights -.text-hairline { font-weight: @font-weight-hairline; } -.text-thin { font-weight: @font-weight-thin; } -.text-regular { font-weight: @font-weight-regular; } -.text-medium { font-weight: @font-weight-medium; } -.text-bold { font-weight: @font-weight-bold; } +.define-text-weights( + hairline @font-weight-hairline, + thin @font-weight-thin, + regular @font-weight-regular, + medium @font-weight-medium, + bold @font-weight-bold +;); // Colors -.text-light { color: @text-light; } -.text-light-soft { color: @text-light-soft; } -.text-light-softer { color: @text-light-softer; } -.text-light-softest { color: @text-light-softest; } +.define-text-color(light; + default @text-light, + soft @text-light-soft, + softer @text-light-softer, + softest @text-light-softest +;); -.text-dark { color: @text-dark; } -.text-dark-soft { color: @text-dark-soft; } -.text-dark-softer { color: @text-dark-softer; } -.text-dark-softest { color: @text-dark-softest; } +.define-text-color(dark; + default @text-dark, + soft @text-dark-soft, + softer @text-dark-softer, + softest @text-dark-softest +;); // Line heights .leading-none { line-height: 1; } @@ -104,8 +112,8 @@ &text-base { .text-base; } &text-lg { .text-lg; } &text-xl { .text-xl; } - &text-2xl { .text-2xl; } - &text-3xl { .text-3xl; } + // &text-2xl { .text-2xl; } + // &text-3xl { .text-3xl; } &text-hairline { .text-hairline; } &text-thin { .text-thin; } &text-regular { .text-regular; }