yummacss 1.2.0 → 2.1.0

package/src/abstracts/_mixins.scss

@@ -0,0 +1,575 @@
+@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]) {
+      margin-left: calc(#{$i * $unit} * calc(1 - 0));
+      margin-right: calc(#{$i * $unit} * 0);
+    }
+
+    .h\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+      margin-left: calc(#{$i * $unit} * calc(1 - 0));
+      margin-right: calc(#{$i * $unit} * 0);
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          margin-left: calc(#{$i * $unit} * calc(1 - 0));
+          margin-right: calc(#{$i * $unit} * 0);
+        }
+      }
+
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          margin-left: calc(#{$i * $unit} * calc(1 - 0));
+          margin-right: calc(#{$i * $unit} * 0);
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-y($prefix, $unit) {
+  @for $i from 0 through 100 {
+    .#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(#{$i * $unit} * calc(1 - 0));
+      margin-bottom: calc(#{$i * $unit} * 0);
+    }
+
+    .h\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(#{$i * $unit} * calc(1 - 0));
+      margin-bottom: calc(#{$i * $unit} * 0);
+    }
+
+    @each $bp, $bp-value in $yma-breakpoints {
+      .#{$bp}\:#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          margin-top: calc(#{$i * $unit} * calc(1 - 0));
+          margin-bottom: calc(#{$i * $unit} * 0);
+        }
+      }
+
+      .h\:#{$bp}\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
+        @include breakpoint($bp-value) {
+          margin-top: calc(#{$i * $unit} * calc(1 - 0));
+          margin-bottom: calc(#{$i * $unit} * 0);
+        }
+      }
+    }
+  }
+}
+
+// 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 box-model-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;
+        }
+      }
+    }
+  }
+}

package/src/abstracts/_theme.scss

@@ -0,0 +1,18 @@
+$yma-theme: (
+  "red": $yma-color-red,
+  "orange": $yma-color-orange,
+  "yellow": $yma-color-yellow,
+  "green": $yma-color-green,
+  "teal": $yma-color-teal,
+  "cyan": $yma-color-cyan,
+  "blue": $yma-color-blue,
+  "indigo": $yma-color-indigo,
+  "violet": $yma-color-violet,
+  "pink": $yma-color-pink,
+  "silver": $yma-color-silver,
+  "gray": $yma-color-gray,
+  "lead": $yma-color-lead,
+  "black": $yma-color-black,
+  "white": $yma-color-white,
+  "transparent": $yma-color-transparent,
+);

package/src/abstracts/_variables.scss

@@ -0,0 +1,68 @@
+// base colors
+$yma-color-red: #d73d3d;
+$yma-color-orange: #e06814;
+$yma-color-yellow: #d3a107;
+$yma-color-green: #1fb155;
+$yma-color-teal: #12a695;
+$yma-color-cyan: #05a4bf;
+$yma-color-blue: #3575dd;
+$yma-color-indigo: #595cd9;
+$yma-color-violet: #7d53dd;
+$yma-color-pink: #d4418a;
+$yma-color-silver: #bfc2c7;
+$yma-color-gray: #606773;
+$yma-color-lead: #3f3f4e;
+$yma-color-black: black;
+$yma-color-white: white;
+$yma-color-transparent: transparent;
+
+// borders
+$yma-border: 1px;
+$yma-border-radius: 0.25rem;
+
+// outlines
+$yma-outline-offset: 1px;
+$yma-outline-width: 1px;
+$yma-decoration-thickness: 1px;
+
+// box model
+$yma-height: 0.25rem;
+$yma-width: 0.25rem;
+$yma-padding: 0.25rem;
+$yma-margin: 0.25rem;
+$yma-spacing: 0.25rem;
+
+// effects
+$yma-backdrop-blur: 4px;
+
+// filters
+$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+
+// flexbox
+$yma-flex-basis: 0.25rem;
+
+// grid
+$yma-gap: 0.25rem;
+$yma-column-gap: 0.25rem;
+$yma-row-gap: 0.25rem;
+
+// layout
+$yma-direction: 0.25;
+
+// typography
+$yma-font-size: 0.75rem;
+$yma-font-weight: 500;
+$yma-font-size-xs: $yma-font-size;
+$yma-font-size-b: 1rem;
+$yma-font-size-sm: $yma-font-size * 2;
+$yma-font-size-md: $yma-font-size * 3;
+$yma-font-size-lg: $yma-font-size * 4;
+$yma-font-size-xl: $yma-font-size * 5;
+$yma-font-size-xxl: $yma-font-size * 6;
+$yma-font-size-3xl: $yma-font-size * 7;
+$yma-font-size-6xl: $yma-font-size * 8;
+$yma-font-size-9xl: $yma-font-size * 9;
+
+$yma-font-charter: Charter, Cambria, serif;
+$yma-font-mono: ui-monospace, Consolas, monospace;
+$yma-font-system: system-ui, sans-serif;

package/src/core.scss

@@ -0,0 +1,3 @@
+$base: false;
+
+@import "yumma.scss";