@vueland/ui 0.0.1 → 0.0.2

package/dist/scss/utils/_transitions.scss

@@ -0,0 +1,98 @@
+@use "../modules/global-vars" as *;
+
+@mixin transition-default() {
+  &-enter-active,
+  &-leave-active {
+    transition: .4s all $primary-transition;
+  }
+
+  &-move {
+    transition: transform .4s;
+  }
+}
+
+.fade {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .2s opacity $primary-transition;
+  }
+}
+
+.scale-in {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .2s opacity $primary-transition, transform .2s $primary-transition;
+  }
+}
+
+.scale-in-out {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: scale(.9);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .15s opacity $primary-transition, transform .15s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: scale(1.1);
+  }
+}
+
+.fade-in-down {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .15s opacity $primary-transition, transform .15s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: translateY(15px);
+  }
+}
+
+.fade-in-up {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .15s opacity $primary-transition, transform .15s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: translateY(-15px);
+  }
+}
+
+.slide-in-left {
+  &-enter-from, &-leave-to {
+    transform: translateX(-100%);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .2s opacity $primary-transition, transform .2s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: translateX(100%);
+  }
+}

package/dist/scss/utils/_typography.scss

@@ -0,0 +1,68 @@
+@use "../maps/grids" as *;
+@use "sass:map";
+
+$font-sizes: (
+  xs:   12px,
+  sm:   14px,
+  base: 16px,
+  lg:   18px,
+  xl:   20px,
+  2xl:  24px,
+  3xl:  32px,
+  4xl:  40px,
+);
+
+$font-weights: (
+  thin:      100,
+  light:     300,
+  regular:   400,
+  medium:    500,
+  semi-bold: 600,
+  bold:      700,
+  heavy:     900,
+);
+
+$line-heights: (
+  none:    1,
+  tight:   1.25,
+  snug:    1.375,
+  normal:  1.5,
+  relaxed: 1.625,
+  loose:   2,
+);
+
+$letter-spacings: (
+  tighter: -0.05em,
+  tight:   -0.025em,
+  normal:   0,
+  wide:     0.025em,
+  wider:    0.05em,
+  widest:   0.1em,
+);
+
+@each $name, $size in $font-sizes {
+  .fs-#{$name} { font-size: $size !important; }
+}
+
+@each $name, $weight in $font-weights {
+  .fw-#{$name} { font-weight: $weight !important; }
+}
+
+@each $name, $value in $line-heights {
+  .lh-#{$name} { line-height: $value !important; }
+}
+
+@each $name, $value in $letter-spacings {
+  .ls-#{$name} { letter-spacing: $value !important; }
+}
+
+// Responsive font sizes
+@each $bp, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      @each $name, $size in $font-sizes {
+        .#{$bp}\:fs-#{$name} { font-size: $size !important; }
+      }
+    }
+  }
+}