@pushui/styles 0.0.3

package/styles/utils/align.scss

@@ -0,0 +1,143 @@
+@use '../mixins/mq' as *;
+
+$text-aligns: left, center, right;
+
+@each $align in $text-aligns {
+  .text-#{$align} {
+    text-align: $align;
+  }
+}
+
+$justify: (
+  'start': flex-start,
+  'center': center,
+  'end': flex-end,
+  'between': space-between,
+  'around': space-around,
+  'evenly': space-evenly,
+);
+
+@each $name, $value in $justify {
+  .justify-#{$name} {
+    justify-content: $value;
+  }
+}
+
+$items: (
+  'start': flex-start,
+  'center': center,
+  'end': flex-end,
+  'stretch': stretch,
+  'baseline': baseline,
+);
+
+@each $name, $value in $items {
+  .items-#{$name} {
+    align-items: $value;
+  }
+}
+
+@each $name, $value in $items {
+  .self-#{$name} {
+    align-self: $value;
+  }
+}
+
+.flex-row { flex-direction: row; }
+.flex-col { flex-direction: column; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col-reverse { flex-direction: column-reverse; }
+
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+
+
+@include mq-sm {
+  @each $align in $text-aligns {
+    .text-sm-#{$align} { text-align: $align; }
+  }
+
+  @each $name, $value in $justify {
+    .justify-sm-#{$name} { justify-content: $value; }
+  }
+
+  @each $name, $value in $items {
+    .items-sm-#{$name} { align-items: $value; }
+    .self-sm-#{$name} { align-self: $value; }
+  }
+
+  .flex-sm-row { flex-direction: row; }
+  .flex-sm-col { flex-direction: column; }
+  .flex-sm-row-reverse { flex-direction: row-reverse; }
+  .flex-sm-col-reverse { flex-direction: column-reverse; }
+  .flex-sm-wrap { flex-wrap: wrap; }
+  .flex-sm-nowrap { flex-wrap: nowrap; }
+}
+
+
+@include mq-md {
+  @each $align in $text-aligns {
+    .text-md-#{$align} { text-align: $align; }
+  }
+
+  @each $name, $value in $justify {
+    .justify-md-#{$name} { justify-content: $value; }
+  }
+
+  @each $name, $value in $items {
+    .items-md-#{$name} { align-items: $value; }
+    .self-md-#{$name} { align-self: $value; }
+  }
+
+  .flex-md-row { flex-direction: row; }
+  .flex-md-col { flex-direction: column; }
+  .flex-md-row-reverse { flex-direction: row-reverse; }
+  .flex-md-col-reverse { flex-direction: column-reverse; }
+  .flex-md-wrap { flex-wrap: wrap; }
+  .flex-md-nowrap { flex-wrap: nowrap; }
+}
+
+
+@include mq-lg {
+  @each $align in $text-aligns {
+    .text-lg-#{$align} { text-align: $align; }
+  }
+
+  @each $name, $value in $justify {
+    .justify-lg-#{$name} { justify-content: $value; }
+  }
+
+  @each $name, $value in $items {
+    .items-lg-#{$name} { align-items: $value; }
+    .self-lg-#{$name} { align-self: $value; }
+  }
+
+  .flex-lg-row { flex-direction: row; }
+  .flex-lg-col { flex-direction: column; }
+  .flex-lg-row-reverse { flex-direction: row-reverse; }
+  .flex-lg-col-reverse { flex-direction: column-reverse; }
+  .flex-lg-wrap { flex-wrap: wrap; }
+  .flex-lg-nowrap { flex-wrap: nowrap; }
+}
+
+@include mq-xl {
+  @each $align in $text-aligns {
+    .text-xl-#{$align} { text-align: $align; }
+  }
+
+  @each $name, $value in $justify {
+    .justify-xl-#{$name} { justify-content: $value; }
+  }
+
+  @each $name, $value in $items {
+    .items-xl-#{$name} { align-items: $value; }
+    .self-xl-#{$name} { align-self: $value; }
+  }
+
+  .flex-xl-row { flex-direction: row; }
+  .flex-xl-col { flex-direction: column; }
+  .flex-xl-row-reverse { flex-direction: row-reverse; }
+  .flex-xl-col-reverse { flex-direction: column-reverse; }
+  .flex-xl-wrap { flex-wrap: wrap; }
+  .flex-xl-nowrap { flex-wrap: nowrap; }
+}

package/styles/utils/aspect.scss

@@ -0,0 +1,4 @@
+.aspect-square { aspect-ratio: 1 / 1; }
+.aspect-video { aspect-ratio: 16 / 9; }
+.aspect-4-3 { aspect-ratio: 4 / 3; }
+.aspect-3-2 { aspect-ratio: 3 / 2; }

package/styles/utils/border.scss

@@ -0,0 +1,48 @@
+$color-variants: (default, primary, secondary, success, danger, warning, info);
+$color-levels: (1, 2, 3, contrast);
+
+.b {
+  border: 0.1rem solid var(--color-grey-4);
+}
+
+@each $variant in $color-variants {
+  @each $level in $color-levels {
+    .b-#{$variant}-#{$level} {
+      border: 0.1rem solid var(--color-#{$variant}-#{$level});
+    }
+  }
+}
+
+@for $i from 1 through 7 {
+  .b-grey-#{$i} {
+    border: 0.1rem solid var(--color-grey-#{$i});
+  }
+}
+
+.b-black {
+  border: 0.1rem solid var(--color-black);
+}
+
+.b-white {
+  border: 0.1rem solid var(--color-white);
+}
+
+.b-t {
+  border-top: 0.1rem solid var(--color-grey-4);
+}
+
+.b-r {
+  border-right: 0.1rem solid var(--color-grey-4);
+}
+
+.b-b {
+  border-bottom: 0.1rem solid var(--color-grey-4);
+}
+
+.b-l {
+  border-left: 0.1rem solid var(--color-grey-4);
+}
+
+.b-none {
+  border: none;
+}

package/styles/utils/color.scss

@@ -0,0 +1,45 @@
+@use '../mixins/color' as *;
+
+@each $variant in $color-variants {
+  @each $level in $color-levels {
+    .bg-#{$variant}-#{$level} {
+      background-color: var(--color-#{$variant}-#{$level});
+    }
+  }
+}
+
+@each $variant in $color-variants {
+  @each $level in $color-levels {
+    .text-#{$variant}-#{$level} {
+      color: var(--color-#{$variant}-#{$level});
+    }
+  }
+}
+
+@for $i from 1 through 7 {
+  .bg-grey-#{$i} {
+    background-color: var(--color-grey-#{$i});
+  }
+}
+
+@for $i from 1 through 7 {
+  .text-grey-#{$i} {
+    color: var(--color-grey-#{$i});
+  }
+}
+
+.bg-black {
+  background-color: var(--color-black);
+}
+
+.bg-white {
+  background-color: var(--color-white);
+}
+
+.text-black {
+  color: var(--color-black);
+}
+
+.text-white {
+  color: var(--color-white);
+}

package/styles/utils/display.scss

@@ -0,0 +1,41 @@
+@use '../mixins/mq' as *;
+
+$displays: (
+  'none': none,
+  'block': block,
+  'flex': flex,
+  'grid': grid,
+  'inline': inline,
+  'inline-block': inline-block,
+  'inline-flex': inline-flex,
+);
+
+@each $name, $value in $displays {
+  .d-#{$name} {
+    display: $value;
+  }
+}
+
+@include mq-sm {
+  @each $name, $value in $displays {
+    .d-sm-#{$name} { display: $value; }
+  }
+}
+
+@include mq-md {
+  @each $name, $value in $displays {
+    .d-md-#{$name} { display: $value; }
+  }
+}
+
+@include mq-lg {
+  @each $name, $value in $displays {
+    .d-lg-#{$name} { display: $value; }
+  }
+}
+
+@include mq-xl {
+  @each $name, $value in $displays {
+    .d-xl-#{$name} { display: $value; }
+  }
+}

package/styles/utils/fit.scss

@@ -0,0 +1,5 @@
+.fit-cover { object-fit: cover; }
+.fit-contain { object-fit: contain; }
+.fit-fill { object-fit: fill; }
+.fit-none { object-fit: none; }
+.fit-scale-down { object-fit: scale-down; }

package/styles/utils/font.scss

@@ -0,0 +1,52 @@
+@use '../mixins/mq' as *;
+
+$sizes: 1, 2, 3, 4, 5, 6, 7, 8, 9;
+
+@each $size in $sizes {
+  .fs-#{$size} {
+    font-size: var(--font-size-#{$size});
+  }
+}
+
+@include mq-sm {
+  @each $size in $sizes {
+    .fs-sm-#{$size} { font-size: var(--font-size-#{$size}); }
+  }
+}
+
+@include mq-md {
+  @each $size in $sizes {
+    .fs-md-#{$size} { font-size: var(--font-size-#{$size}); }
+  }
+}
+
+@include mq-lg {
+  @each $size in $sizes {
+    .fs-lg-#{$size} { font-size: var(--font-size-#{$size}); }
+  }
+}
+
+@include mq-xl {
+  @each $size in $sizes {
+    .fs-xl-#{$size} { font-size: var(--font-size-#{$size}); }
+  }
+}
+
+$weights: body, button, strong, heading;
+
+@each $weight in $weights {
+  .fw-#{$weight} {
+    font-weight: var(--font-weight-#{$weight});
+  }
+}
+
+.text-uppercase { text-transform: uppercase; }
+.text-lowercase { text-transform: lowercase; }
+.text-capitalize { text-transform: capitalize; }
+.text-nowrap { white-space: nowrap; }
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/styles/utils/object.scss

@@ -0,0 +1,9 @@
+.obj-center { object-position: center; }
+.obj-top { object-position: top; }
+.obj-bottom { object-position: bottom; }
+.obj-left { object-position: left; }
+.obj-right { object-position: right; }
+.obj-top-left { object-position: top left; }
+.obj-top-right { object-position: top right; }
+.obj-bottom-left { object-position: bottom left; }
+.obj-bottom-right { object-position: bottom right; }

package/styles/utils/opacity.scss

@@ -0,0 +1,5 @@
+@for $i from 0 through 10 {
+  .opacity-#{$i} {
+    opacity: calc($i / 10);
+  }
+}

package/styles/utils/overflow.scss

@@ -0,0 +1,7 @@
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+.overflow-scroll { overflow: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }

package/styles/utils/position.scss

@@ -0,0 +1,5 @@
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+.static { position: static; }

package/styles/utils/radius.scss

@@ -0,0 +1,13 @@
+@for $i from 1 through 7 {
+  .r-#{$i} {
+    border-radius: var(--radius-#{$i});
+  }
+}
+
+.r-full {
+  border-radius: 9999px;
+}
+
+.r-none {
+  border-radius: 0;
+}

package/styles/utils/size.scss

@@ -0,0 +1,20 @@
+.w-full { width: 100%; }
+.w-auto { width: auto; }
+.h-full { height: 100%; }
+.h-auto { height: auto; }
+
+.h-screen {
+  height: 100vh;
+
+  @supports (height: 100dvh) {
+    height: 100dvh;
+  }
+}
+
+.min-h-screen {
+  min-height: 100vh;
+
+  @supports (min-height: 100dvh) {
+    min-height: 100dvh;
+  }
+}

package/styles/utils/spacing.scss

@@ -0,0 +1,226 @@
+@use '../mixins/mq' as *;
+
+$sizes: 1, 2, 3, 4, 5, 6, 7, 8, 9;
+$directions: (
+  't': 'top',
+  'r': 'right',
+  'b': 'bottom',
+  'l': 'left',
+);
+$axes: (
+  'v': ('top', 'bottom'),
+  'h': ('left', 'right'),
+);
+
+
+.m-0 { margin: 0; }
+.p-0 { padding: 0; }
+.g-0 { gap: 0; }
+
+@each $dir, $prop in $directions {
+  .m#{$dir}-0 { margin-#{$prop}: 0; }
+  .p#{$dir}-0 { padding-#{$prop}: 0; }
+}
+
+@each $axis, $props in $axes {
+  .m#{$axis}-0 { @each $prop in $props { margin-#{$prop}: 0; } }
+  .p#{$axis}-0 { @each $prop in $props { padding-#{$prop}: 0; } }
+}
+
+
+.m-auto { margin: auto; }
+
+@each $dir, $prop in $directions {
+  .m#{$dir}-auto { margin-#{$prop}: auto; }
+}
+
+@each $axis, $props in $axes {
+  .m#{$axis}-auto { @each $prop in $props { margin-#{$prop}: auto; } }
+}
+
+
+@each $size in $sizes {
+  .g-#{$size} {
+    gap: var(--spacing-#{$size});
+  }
+}
+
+@each $size in $sizes {
+  .m-#{$size} {
+    margin: var(--spacing-#{$size});
+  }
+
+  @each $dir, $prop in $directions {
+    .m#{$dir}-#{$size} {
+      margin-#{$prop}: var(--spacing-#{$size});
+    }
+  }
+
+  @each $axis, $props in $axes {
+    .m#{$axis}-#{$size} {
+      @each $prop in $props {
+        margin-#{$prop}: var(--spacing-#{$size});
+      }
+    }
+  }
+}
+
+@each $size in $sizes {
+  .p-#{$size} {
+    padding: var(--spacing-#{$size});
+  }
+
+  @each $dir, $prop in $directions {
+    .p#{$dir}-#{$size} {
+      padding-#{$prop}: var(--spacing-#{$size});
+    }
+  }
+
+  @each $axis, $props in $axes {
+    .p#{$axis}-#{$size} {
+      @each $prop in $props {
+        padding-#{$prop}: var(--spacing-#{$size});
+      }
+    }
+  }
+}
+
+@include mq-sm {
+  .m-sm-0 { margin: 0; }
+  .p-sm-0 { padding: 0; }
+  .g-sm-0 { gap: 0; }
+  .m-sm-auto { margin: auto; }
+
+  @each $dir, $prop in $directions {
+    .m#{$dir}-sm-0 { margin-#{$prop}: 0; }
+    .p#{$dir}-sm-0 { padding-#{$prop}: 0; }
+    .m#{$dir}-sm-auto { margin-#{$prop}: auto; }
+  }
+
+  @each $axis, $props in $axes {
+    .m#{$axis}-sm-0 { @each $prop in $props { margin-#{$prop}: 0; } }
+    .p#{$axis}-sm-0 { @each $prop in $props { padding-#{$prop}: 0; } }
+    .m#{$axis}-sm-auto { @each $prop in $props { margin-#{$prop}: auto; } }
+  }
+
+  @each $size in $sizes {
+    .m-sm-#{$size} { margin: var(--spacing-#{$size}); }
+    .p-sm-#{$size} { padding: var(--spacing-#{$size}); }
+    .g-sm-#{$size} { gap: var(--spacing-#{$size}); }
+
+    @each $dir, $prop in $directions {
+      .m#{$dir}-sm-#{$size} { margin-#{$prop}: var(--spacing-#{$size}); }
+      .p#{$dir}-sm-#{$size} { padding-#{$prop}: var(--spacing-#{$size}); }
+    }
+
+    @each $axis, $props in $axes {
+      .m#{$axis}-sm-#{$size} { @each $prop in $props { margin-#{$prop}: var(--spacing-#{$size}); } }
+      .p#{$axis}-sm-#{$size} { @each $prop in $props { padding-#{$prop}: var(--spacing-#{$size}); } }
+    }
+  }
+}
+
+@include mq-md {
+  .m-md-0 { margin: 0; }
+  .p-md-0 { padding: 0; }
+  .g-md-0 { gap: 0; }
+  .m-md-auto { margin: auto; }
+
+  @each $dir, $prop in $directions {
+    .m#{$dir}-md-0 { margin-#{$prop}: 0; }
+    .p#{$dir}-md-0 { padding-#{$prop}: 0; }
+    .m#{$dir}-md-auto { margin-#{$prop}: auto; }
+  }
+
+  @each $axis, $props in $axes {
+    .m#{$axis}-md-0 { @each $prop in $props { margin-#{$prop}: 0; } }
+    .p#{$axis}-md-0 { @each $prop in $props { padding-#{$prop}: 0; } }
+    .m#{$axis}-md-auto { @each $prop in $props { margin-#{$prop}: auto; } }
+  }
+
+  @each $size in $sizes {
+    .m-md-#{$size} { margin: var(--spacing-#{$size}); }
+    .p-md-#{$size} { padding: var(--spacing-#{$size}); }
+    .g-md-#{$size} { gap: var(--spacing-#{$size}); }
+
+    @each $dir, $prop in $directions {
+      .m#{$dir}-md-#{$size} { margin-#{$prop}: var(--spacing-#{$size}); }
+      .p#{$dir}-md-#{$size} { padding-#{$prop}: var(--spacing-#{$size}); }
+    }
+
+    @each $axis, $props in $axes {
+      .m#{$axis}-md-#{$size} { @each $prop in $props { margin-#{$prop}: var(--spacing-#{$size}); } }
+      .p#{$axis}-md-#{$size} { @each $prop in $props { padding-#{$prop}: var(--spacing-#{$size}); } }
+    }
+  }
+}
+
+@include mq-lg {
+  .m-lg-0 { margin: 0; }
+  .p-lg-0 { padding: 0; }
+  .g-lg-0 { gap: 0; }
+  .m-lg-auto { margin: auto; }
+
+  @each $dir, $prop in $directions {
+    .m#{$dir}-lg-0 { margin-#{$prop}: 0; }
+    .p#{$dir}-lg-0 { padding-#{$prop}: 0; }
+    .m#{$dir}-lg-auto { margin-#{$prop}: auto; }
+  }
+
+  @each $axis, $props in $axes {
+    .m#{$axis}-lg-0 { @each $prop in $props { margin-#{$prop}: 0; } }
+    .p#{$axis}-lg-0 { @each $prop in $props { padding-#{$prop}: 0; } }
+    .m#{$axis}-lg-auto { @each $prop in $props { margin-#{$prop}: auto; } }
+  }
+
+  @each $size in $sizes {
+    .m-lg-#{$size} { margin: var(--spacing-#{$size}); }
+    .p-lg-#{$size} { padding: var(--spacing-#{$size}); }
+    .g-lg-#{$size} { gap: var(--spacing-#{$size}); }
+
+    @each $dir, $prop in $directions {
+      .m#{$dir}-lg-#{$size} { margin-#{$prop}: var(--spacing-#{$size}); }
+      .p#{$dir}-lg-#{$size} { padding-#{$prop}: var(--spacing-#{$size}); }
+    }
+
+    @each $axis, $props in $axes {
+      .m#{$axis}-lg-#{$size} { @each $prop in $props { margin-#{$prop}: var(--spacing-#{$size}); } }
+      .p#{$axis}-lg-#{$size} { @each $prop in $props { padding-#{$prop}: var(--spacing-#{$size}); } }
+    }
+  }
+}
+
+@include mq-xl {
+  .m-xl-0 { margin: 0; }
+  .p-xl-0 { padding: 0; }
+  .g-xl-0 { gap: 0; }
+  .m-xl-auto { margin: auto; }
+
+  @each $dir, $prop in $directions {
+    .m#{$dir}-xl-0 { margin-#{$prop}: 0; }
+    .p#{$dir}-xl-0 { padding-#{$prop}: 0; }
+    .m#{$dir}-xl-auto { margin-#{$prop}: auto; }
+  }
+
+  @each $axis, $props in $axes {
+    .m#{$axis}-xl-0 { @each $prop in $props { margin-#{$prop}: 0; } }
+    .p#{$axis}-xl-0 { @each $prop in $props { padding-#{$prop}: 0; } }
+    .m#{$axis}-xl-auto { @each $prop in $props { margin-#{$prop}: auto; } }
+  }
+
+  @each $size in $sizes {
+    .m-xl-#{$size} { margin: var(--spacing-#{$size}); }
+    .p-xl-#{$size} { padding: var(--spacing-#{$size}); }
+    .g-xl-#{$size} { gap: var(--spacing-#{$size}); }
+
+    @each $dir, $prop in $directions {
+      .m#{$dir}-xl-#{$size} { margin-#{$prop}: var(--spacing-#{$size}); }
+      .p#{$dir}-xl-#{$size} { padding-#{$prop}: var(--spacing-#{$size}); }
+    }
+
+    @each $axis, $props in $axes {
+      .m#{$axis}-xl-#{$size} { @each $prop in $props { margin-#{$prop}: var(--spacing-#{$size}); } }
+      .p#{$axis}-xl-#{$size} { @each $prop in $props { padding-#{$prop}: var(--spacing-#{$size}); } }
+    }
+  }
+}