yummacss 1.2.0 → 2.0.0

package/src/abstracts/_breakpoints.scss

@@ -0,0 +1,43 @@
+$yma-breakpoints: (
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "xxl": 1536px,
+);
+
+@mixin sm {
+  @media (min-width: map-get($yma-breakpoints, "sm")) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: map-get($yma-breakpoints, "md")) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: map-get($yma-breakpoints, "lg")) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: map-get($yma-breakpoints, "xl")) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  @media (min-width: map-get($yma-breakpoints, "xxl")) {
+    @content;
+  }
+}
+
+@mixin breakpoint($bp) {
+  @media (min-width: $bp) {
+    @content;
+  }
+}

package/src/abstracts/_colors.scss

@@ -0,0 +1,29 @@
+@import "mixins";
+
+@each $k, $v in $yma-colors {
+  @include color-variants("accent-color", "ac", $k, $v);
+  @include color-variants("background-color", "bg", $k, $v);
+  @include color-variants("border-bottom-color", "bc-b", $k, $v);
+  @include color-variants("border-color", "bc", $k, $v);
+  @include color-variants("border-left-color", "bc-l", $k, $v);
+  @include color-variants("border-right-color", "bc-r", $k, $v);
+  @include color-variants("border-top-color", "bc-t", $k, $v);
+  @include color-variants("caret-color", "cc", $k, $v);
+  @include color-variants("color", "tc", $k, $v);
+  @include color-variants("outline-color", "oc", $k, $v);
+  @include color-variants("text-decoration-color", "tdc", $k, $v);
+
+  @if (is-not-mono($v, $yma-colors)) {
+    @include shade-variants("accent-color", "ac", $k, $v, 10%);
+    @include shade-variants("background-color", "bg", $k, $v, 10%);
+    @include shade-variants("border-bottom-color", "bc-b", $k, $v, 10%);
+    @include shade-variants("border-color", "bc", $k, $v, 10%);
+    @include shade-variants("border-left-color", "bc-l", $k, $v, 10%);
+    @include shade-variants("border-right-color", "bc-r", $k, $v, 10%);
+    @include shade-variants("border-top-color", "bc-t", $k, $v, 10%);
+    @include shade-variants("caret-color", "cc", $k, $v, 10%);
+    @include shade-variants("color", "tc", $k, $v, 10%);
+    @include shade-variants("outline-color", "oc", $k, $v, 10%);
+    @include shade-variants("text-decoration-color", "tdc", $k, $v, 10%);
+  }
+}

package/src/abstracts/_functions.scss

@@ -0,0 +1,4 @@
+@function is-not-mono($v, $yma-colors) {
+  @return $v != map-get($yma-colors, "black") and $v !=
+    map-get($yma-colors, "white") and $v != map-get($yma-colors, "transparent");
+}

package/src/abstracts/_layout.scss

@@ -0,0 +1,18 @@
+@import "mixins";
+@import "breakpoints";
+
+.cnt {
+  width: 100%;
+
+  @each $bp, $bp-value in $yma-breakpoints {
+    @include breakpoint($bp-value) {
+      max-width: $bp-value;
+    }
+  }
+}
+
+.ins {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/abstracts/_mixins.scss

@@ -0,0 +1,589 @@
+@import "breakpoints";
+
+@mixin color-variants($property, $prefix, $k, $v) {
+  .#{$prefix}-#{$k} {
+    #{$property}: $v;
+  }
+
+  .h\:#{$prefix}-#{$k} {
+    &:hover {
+      #{$property}: $v;
+    }
+  }
+}
+
+@mixin shade-variants($property, $prefix, $k, $v, $mod) {
+  @for $i from 1 through 6 {
+    // light variants
+    .#{$prefix}-l-#{$k}-#{$i} {
+      #{$property}: mix(white, $v, $i * $mod);
+    }
+
+    .h\:#{$prefix}-l-#{$k}-#{$i} {
+      &:hover {
+        #{$property}: mix(white, $v, $i * $mod);
+      }
+    }
+
+    // dark variants
+    .#{$prefix}-d-#{$k}-#{$i} {
+      #{$property}: mix(black, $v, $i * $mod);
+    }
+
+    .h\:#{$prefix}-d-#{$k}-#{$i} {
+      &:hover {
+        #{$property}: mix(black, $v, $i * $mod);
+      }
+    }
+  }
+}
+
+@mixin variants($property, $prefix, $unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} {
+      #{$property}: $i * $unit;
+    }
+
+    // Hover variant
+    .h\:#{$prefix}-#{$i}:hover {
+      #{$property}: $i * $unit;
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} {
+        @include breakpoint($bp-value) {
+          #{$property}: $i * $unit;
+        }
+      }
+
+      // Responsive hover variant
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover {
+        @include breakpoint($bp-value) {
+          #{$property}: $i * $unit;
+        }
+      }
+    }
+  }
+}
+
+@mixin dimension-variants($prefix, $height-unit, $width-unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} {
+      height: $i * $height-unit;
+      width: $i * $width-unit;
+    }
+
+    // Hover variant
+    .h\:#{$prefix}-#{$i}:hover {
+      height: $i * $height-unit;
+      width: $i * $width-unit;
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} {
+        @include breakpoint($bp-value) {
+          height: $i * $height-unit;
+          width: $i * $width-unit;
+        }
+      }
+
+      // Responsive hover variant
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover {
+        @include breakpoint($bp-value) {
+          height: $i * $height-unit;
+          width: $i * $width-unit;
+        }
+      }
+    }
+  }
+}
+
+@mixin x-axis-variants($property, $prefix, $unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} {
+      #{$property}-left: $i * $unit;
+      #{$property}-right: $i * $unit;
+    }
+
+    // Hover variant
+    .h\:#{$prefix}-#{$i}:hover {
+      #{$property}-left: $i * $unit;
+      #{$property}-right: $i * $unit;
+    }
+
+    // Responsive variant
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} {
+        @include breakpoint($bp-value) {
+          #{$property}-left: $i * $unit;
+          #{$property}-right: $i * $unit;
+        }
+      }
+
+      // Responsive hover variant
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover {
+        @include breakpoint($bp-value) {
+          #{$property}-left: $i * $unit;
+          #{$property}-right: $i * $unit;
+        }
+      }
+    }
+  }
+}
+
+@mixin y-axis-variants($property, $prefix, $unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} {
+      #{$property}-top: $i * $unit;
+      #{$property}-bottom: $i * $unit;
+    }
+
+    // Hover variant
+    .h\:#{$prefix}-#{$i}:hover {
+      #{$property}-top: $i * $unit;
+      #{$property}-bottom: $i * $unit;
+    }
+
+    // Responsive hover variant
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} {
+        @include breakpoint($bp-value) {
+          #{$property}-top: $i * $unit;
+          #{$property}-bottom: $i * $unit;
+        }
+      }
+
+      // Responsive hover variant
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover {
+        @include breakpoint($bp-value) {
+          #{$property}-top: $i * $unit;
+          #{$property}-bottom: $i * $unit;
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-x($prefix, $unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+      --yma-spacing-x: 1;
+      margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
+      margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+    }
+
+    // Hover variant
+    .h\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+      --yma-spacing-x: 1;
+      margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
+      margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+    }
+
+    // Responsive hover variant
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          --yma-spacing-x: 1;
+          margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
+          margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+        }
+      }
+
+      // Responsive hover variant
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          --yma-spacing-x: 1;
+          margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
+          margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-y($prefix, $unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+      --yma-spacing-y: 1;
+      margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
+      margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+    }
+
+    // Hover variant
+    .h\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+      --yma-spacing-y: 1;
+      margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
+      margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+    }
+
+    // Responsive hover variant
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          --yma-spacing-y: 1;
+          margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
+          margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+        }
+      }
+
+      // Responsive hover variant
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          --yma-spacing-y: 1;
+          margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
+          margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+        }
+      }
+    }
+  }
+}
+
+// Utility extensions
+@mixin extensions($map, $prefixes) {
+  @each $k, $v in $map {
+    @each $prefix, $property in $prefixes {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+
+      // Hover variant
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+
+      // Responsive hover variant
+      @each $bp, $bp-value in $yma-breakpoints {
+        .#{$bp}\:#{$prefix}-#{$k} {
+          @include breakpoint($bp-value) {
+            #{$property}: $v;
+          }
+        }
+
+        // Responsive hover variant
+        .h\:#{$bp}\:#{$prefix}-#{$k}:hover {
+          @include breakpoint($bp-value) {
+            #{$property}: $v;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin dimension-extensions($map) {
+  @each $k, $v in $map {
+    .dim-#{$k} {
+      height: $v;
+      width: $v;
+    }
+
+    .h\:dim-#{$k}:hover {
+      height: $v;
+      width: $v;
+    }
+
+    .max-dim-#{$k} {
+      max-height: $v;
+      max-width: $v;
+    }
+
+    .h\:max-dim-#{$k}:hover {
+      max-height: $v;
+      max-width: $v;
+    }
+
+    .min-dim-#{$k} {
+      min-height: $v;
+      min-width: $v;
+    }
+
+    .h\:min-dim-#{$k}:hover {
+      min-height: $v;
+      min-width: $v;
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:dim-#{$k} {
+        @include breakpoint($bp-value) {
+          height: $v;
+          width: $v;
+        }
+      }
+
+      .h\:#{$bp}\:dim-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          height: $v;
+          width: $v;
+        }
+      }
+
+      .#{$bp}\:max-dim-#{$k} {
+        @include breakpoint($bp-value) {
+          max-height: $v;
+          max-width: $v;
+        }
+      }
+
+      .h\:#{$bp}\:max-dim-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          max-height: $v;
+          max-width: $v;
+        }
+      }
+
+      .#{$bp}\:min-dim-#{$k} {
+        @include breakpoint($bp-value) {
+          min-height: $v;
+          min-width: $v;
+        }
+      }
+
+      .h\:#{$bp}\:min-dim-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          min-height: $v;
+          min-width: $v;
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-extensions($map, $prefixes, $property) {
+  @each $k, $v in $map {
+    @if $k == "auto" {
+      @each $prefix in $prefixes {
+        .#{$prefix}-#{$k} {
+          #{$property}: $v;
+        }
+
+        .h\:#{$prefix}-#{$k}:hover {
+          #{$property}: $v;
+        }
+      }
+
+      .mx-#{$k} {
+        margin-left: $v;
+        margin-right: $v;
+      }
+
+      .h\:mx-#{$k}:hover {
+        margin-left: $v;
+        margin-right: $v;
+      }
+
+      .px-#{$k} {
+        padding-left: $v;
+        padding-right: $v;
+      }
+
+      .h\:px-#{$k}:hover {
+        padding-left: $v;
+        padding-right: $v;
+      }
+
+      .my-#{$k} {
+        margin-bottom: $v;
+        margin-top: $v;
+      }
+
+      .h\:my-#{$k}:hover {
+        margin-bottom: $v;
+        margin-top: $v;
+      }
+
+      .py-#{$k} {
+        padding-bottom: $v;
+        padding-top: $v;
+      }
+
+      .h\:py-#{$k}:hover {
+        padding-bottom: $v;
+        padding-top: $v;
+      }
+
+      @each $bp, $bp-value in $yma-breakpoints {
+        @each $prefix in $prefixes {
+          .#{$bp}\:#{$prefix}-#{$k} {
+            @include breakpoint($bp-value) {
+              #{$property}: $v;
+            }
+          }
+
+          .h\:#{$bp}\:#{$prefix}-#{$k}:hover {
+            @include breakpoint($bp-value) {
+              #{$property}: $v;
+            }
+          }
+        }
+
+        .#{$bp}\:mx-#{$k} {
+          @include breakpoint($bp-value) {
+            margin-left: $v;
+            margin-right: $v;
+          }
+        }
+
+        .h\:#{$bp}\:mx-#{$k}:hover {
+          @include breakpoint($bp-value) {
+            margin-left: $v;
+            margin-right: $v;
+          }
+        }
+
+        .#{$bp}\:px-#{$k} {
+          @include breakpoint($bp-value) {
+            padding-left: $v;
+            padding-right: $v;
+          }
+        }
+
+        .h\:#{$bp}\:px-#{$k}:hover {
+          @include breakpoint($bp-value) {
+            padding-left: $v;
+            padding-right: $v;
+          }
+        }
+
+        .#{$bp}\:my-#{$k} {
+          @include breakpoint($bp-value) {
+            margin-bottom: $v;
+            margin-top: $v;
+          }
+        }
+
+        .h\:#{$bp}\:my-#{$k}:hover {
+          @include breakpoint($bp-value) {
+            margin-bottom: $v;
+            margin-top: $v;
+          }
+        }
+
+        .#{$bp}\:py-#{$k} {
+          @include breakpoint($bp-value) {
+            padding-bottom: $v;
+            padding-top: $v;
+          }
+        }
+
+        .h\:#{$bp}\:py-#{$k}:hover {
+          @include breakpoint($bp-value) {
+            padding-bottom: $v;
+            padding-top: $v;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin height-extensions($map) {
+  @each $k, $v in $map {
+    .h-#{$k} {
+      height: $v;
+    }
+    .h\:h-#{$k}:hover {
+      height: $v;
+    }
+    .max-h-#{$k} {
+      max-height: $v;
+    }
+    .h\:max-h-#{$k}:hover {
+      max-height: $v;
+    }
+    .min-h-#{$k} {
+      min-height: $v;
+    }
+    .h\:min-h-#{$k}:hover {
+      min-height: $v;
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:h-#{$k} {
+        @include breakpoint($bp-value) {
+          height: $v;
+        }
+      }
+      .h\:#{$bp}\:h-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          height: $v;
+        }
+      }
+      .#{$bp}\:max-h-#{$k} {
+        @include breakpoint($bp-value) {
+          max-height: $v;
+        }
+      }
+      .h\:#{$bp}\:max-h-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          max-height: $v;
+        }
+      }
+      .#{$bp}\:min-h-#{$k} {
+        @include breakpoint($bp-value) {
+          min-height: $v;
+        }
+      }
+      .h\:#{$bp}\:min-h-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          min-height: $v;
+        }
+      }
+    }
+  }
+}
+
+@mixin width-extensions($map) {
+  @each $k, $v in $map {
+    .w-#{$k} {
+      width: $v;
+    }
+    .h\:w-#{$k}:hover {
+      width: $v;
+    }
+    .max-w-#{$k} {
+      max-width: $v;
+    }
+    .h\:max-w-#{$k}:hover {
+      max-width: $v;
+    }
+    .min-w-#{$k} {
+      min-width: $v;
+    }
+    .h\:min-w-#{$k}:hover {
+      min-width: $v;
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:w-#{$k} {
+        @include breakpoint($bp-value) {
+          width: $v;
+        }
+      }
+      .h\:#{$bp}\:w-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          width: $v;
+        }
+      }
+      .#{$bp}\:max-w-#{$k} {
+        @include breakpoint($bp-value) {
+          max-width: $v;
+        }
+      }
+      .h\:#{$bp}\:max-w-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          max-width: $v;
+        }
+      }
+      .#{$bp}\:min-w-#{$k} {
+        @include breakpoint($bp-value) {
+          min-width: $v;
+        }
+      }
+      .h\:#{$bp}\:min-w-#{$k}:hover {
+        @include breakpoint($bp-value) {
+          min-width: $v;
+        }
+      }
+    }
+  }
+}