Merge branch 'insanity'

src/generators.less

@@ -21,6 +21,7 @@
   }
 }
 
+@import "generators/_utility-variants";
 @import "generators/backgrounds";
 
 @import "generators/border-colors";

src/generators/_utility-variants.less

@@ -0,0 +1,60 @@
+.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);
+}
+
+.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
+  & {
+    .generate-utility-variant(@utility; @variants; @ruleset);
+  }
+}
+
+.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
+  & {
+    @variant: extract(@variants, @i);
+    .generate-utility-variant(@utility; @variant; @ruleset);
+  }
+  .generate-utility-variants(@utility; @variants; @ruleset; @i + 1);
+}
+
+.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);
+}
+
+.generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
+  & {
+    .generate-screen-utility-variant(@utility; @variants; @screen-name; @ruleset);
+  }
+}
+
+.generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
+  & {
+    @variant: extract(@variants, @i);
+    .generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset);
+  }
+  .generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i + 1);
+}
+
+.generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @screen-name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  @media (min-width: @screen-width) {
+    .generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset);
+  }
+  .generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i + 1);
+}

src/generators/backgrounds.less

@@ -1,27 +1,18 @@
-.generate-bg-color-utility(@name; @variant; @color) when (@variant = default) {
-  .define-selector(~"bg-@{name}"; { background-color: @color; });
+.define-bg-colors(@variants) {
+  .generate-utility-variants('bg'; @variants; {
+    background-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-bg-color-utility(@name; @variant; @color) when not (@variant = default) {
-  .define-selector(~"bg-@{name}-@{variant}"; { background-color: @color; });
+.define-bg-colors(@variants; none) {
+  .define-bg-colors(@variants);
 }
 
-.generate-bg-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-bg-color-utility(@color-name; @variant-name; @variant-color);
+.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);
+  });
 }
 
-.generate-bg-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-bg-color-utility(@color-name; @variant-name; @variant-color);
-  .generate-bg-color-utilities(@color-name; @color-variants; @i + 1);
-}
-
-.define-bg-color(@color-name; @color-variants) {
-    .generate-bg-color-utilities(@color-name; @color-variants);
-}

src/generators/border-colors.less

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

src/generators/constrain.less

@@ -1,69 +1,18 @@
-.generate-constrain-utility(@variant; @size) {
-  .define-selector(~"constrain-@{variant}"; {
-    max-width: @size;
-    flex-basis: @size;
+.define-constrains(@variants) {
+  .generate-utility-variants('constrain'; @variants; {
+    max-width: extract(@__variant-value, 2);
+    flex-basis: extract(@__variant-value, 2);
   });
 }
 
-.generate-constrain-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-constrain-utility(@name; @size);
+.define-constrains(@variants; none) {
+  .define-constrains(@variants);
 }
 
-.generate-constrain-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-constrain-utility(@name; @size);
-  .generate-constrain-utilities(@size-variants; @i + 1);
-}
-
-.generate-screen-constrain-utility(@variant; @size; @screen-name; @screen-width) {
-  @media (min-width: @screen-width) {
-    .define-selector(~"@{screen-name}\:constrain-@{variant}"; {
-      max-width: @size;
-      flex-basis: @size;
-    });
-  }
-}
-
-.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @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-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
-}
-
-.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @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-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
-  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i + 1);
-}
-
-.generate-responsive-constrain-utilities(@size-variants; @screens; @i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @screen-name: extract(@screen, 1);
-  @screen-width: extract(@screen, 2);
-
-  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width);
-  .generate-responsive-constrain-utilities(@size-variants; @screens; @i + 1);
-}
-
-.define-constrains(@size-variants) {
-    .generate-constrain-utilities(@size-variants);
-}
-
-.define-constrains(@size-variants) when (@screens = none) {
-    .generate-constrain-utilities(@size-variants);
-}
-
-.define-constrains(@size-variants; @screens) {
-    .generate-constrain-utilities(@size-variants);
-    .generate-responsive-constrain-utilities(@size-variants; @screens);
+.define-constrains(@variants; @screens) when not (@screens = none) {
+  .define-constrains(@variants);
+  .generate-responsive-utility-variants('constrain'; @variants; @screens; {
+    max-width: extract(@__variant-value, 2);
+    flex-basis: extract(@__variant-value, 2);
+  });
 }

src/generators/text-colors.less

@@ -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; {
+    color: 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; {
+    color: 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);
-}

src/generators/text-sizes.less

@@ -1,23 +1,16 @@
-.generate-text-size-utility(@variant; @size) {
-  .define-selector(~"text-@{variant}"; { font-size: @size; });
+.define-text-sizes(@variants) {
+  .generate-utility-variants('text'; @variants; {
+    font-size: extract(@__variant-value, 2);
+  });
 }
 
-.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);
+.define-text-sizes(@variants; none) {
+  .define-text-sizes(@variants);
 }
 
-.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);
+.define-text-sizes(@variants; @screens) when not (@screens = none) {
+  .define-text-sizes(@variants);
+  .generate-responsive-utility-variants('text'; @variants; @screens; {
+    font-size: extract(@__variant-value, 2);
+  });
 }

src/generators/text-weights.less

@@ -1,23 +1,16 @@
-.generate-weight-utility(@variant; @weight) {
-  .define-selector(~"text-@{variant}"; { font-weight: @weight; });
+.define-text-weights(@variants) {
+  .generate-utility-variants('text'; @variants; {
+    font-weight: extract(@__variant-value, 2);
+  });
 }
 
-.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);
+.define-text-weights(@variants; none) {
+  .define-text-weights(@variants);
 }
 
-.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);
+.define-text-weights(@variants; @screens) when not (@screens = none) {
+  .define-text-weights(@variants);
+  .generate-responsive-utility-variants('text'; @variants; @screens; {
+    font-weight: extract(@__variant-value, 2);
+  });
 }

src/utilities/backgrounds.less

@@ -1,31 +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 { background-color: @bg-light; }
-.bg-light-soft { background-color: @bg-light-soft; }
-.bg-light-softer { background-color: @bg-light-softer; }
-
-.hover-bg-light { &:hover { .bg-light; } }
-.hover-bg-light-soft { &:hover { .bg-light-soft; } }
-.hover-bg-light-softer { &:hover { .bg-light-softer; } }
-
-.bg-dark { background-color: @bg-dark; }
-.bg-dark-soft { background-color: @bg-dark-soft; }
-.bg-dark-softer { background-color: @bg-dark-softer; }
-
-.bg-overlay-softest { background-color: rgba(0,0,0,0.15); }
-.bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
-.bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
-
-.responsive({
-  &bg-light { .bg-light; }
-  &bg-light-soft { .bg-light-soft; }
-  &bg-light-softer { .bg-light-softer; }
-  &bg-overlay-soft { .bg-overlay-soft; }
-  &bg-overlay-dark { .bg-overlay-dark; }
-});
+.define-bg-colors(@bg-colors; @screens);

src/utilities/borders.less

@@ -54,16 +54,18 @@
 .border-r-0 { border-right-style: none; }
 
 // Colors
-.border-dark { border-color: @border-dark; }
-.border-dark-soft { border-color: @border-dark-soft; }
-.border-dark-softer { border-color: @border-dark-softer; }
+@border-dark-scale:
+  default @border-dark,
+  'soft' @border-dark-soft,
+  'softer' @border-dark-softer;
 
-.border-light { border-color: @border-light; }
-.border-light-soft { border-color: @border-light-soft; }
-.border-light-softer { border-color: @border-light-softer; }
+@border-light-scale:
+  default @border-light,
+  'soft' @border-light-soft,
+  'softer' @border-light-softer;
 
-.border-invisible { border-color: transparent; }
-.hover-border-invisible { &:hover { .border-invisible; } }
+.define-border-color('dark'; @border-dark-scale; @screens);
+.define-border-color('light'; @border-light-scale; @screens);
 
 // Radius
 .rounded-sm { border-radius: @border-radius-1; }
@@ -115,13 +117,6 @@
   &border-b-0 { .border-b-0; }
   &border-l-0 { .border-l-0; }
   &border-r-0 { .border-r-0; }
-  &border-dark { .border-dark; }
-  &border-dark-soft { .border-dark-soft; }
-  &border-dark-softer { .border-dark-softer; }
-  &border-light { .border-light; }
-  &border-light-soft { .border-light-soft; }
-  &border-light-softer { .border-light-softer; }
-  &border-invisible { .border-invisible; }
   &rounded-sm { .rounded-sm; }
   &rounded-t-sm { .rounded-t-sm; }
   &rounded-r-sm { .rounded-r-sm; }

src/utilities/text.less

@@ -42,7 +42,6 @@
 @text-dark-softer: hsl(0, 0%, 65%);
 @text-dark-softest: hsl(0, 0%, 75%);
 
-
 // Sizes
 .define-text-sizes(
   'xs' @font-size-xs,
@@ -52,7 +51,7 @@
   'xl' @font-size-xl,
   '2xl' @font-size-2xl,
   '3xl' @font-size-3xl
-;);
+; @screens);
 
 // Weights
 .define-text-weights(
@@ -61,7 +60,7 @@
   'regular' @font-weight-regular,
   'medium' @font-weight-medium,
   'bold' @font-weight-bold
-;);
+; @screens);
 
 // Colors
 .define-text-color(light;
@@ -69,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; }
@@ -116,26 +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-hairline { .text-hairline; }
-  &text-thin { .text-thin; }
-  &text-regular { .text-regular; }
-  &text-medium { .text-medium; }
-  &text-bold { .text-bold; }
-  &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; }