补充 utilities

scss/_utilities.scss

@@ -8,8 +8,30 @@
 @import './utilities/border/border-color';
 
 @import './utilities/layout/box-sizing';
+@import './utilities/layout/clear';
 @import './utilities/layout/display';
 @import './utilities/layout/float';
+@import './utilities/layout/overflow';
+@import './utilities/layout/position';
+@import './utilities/layout/top-right-bottom-left';
+@import './utilities/layout/visibility';
+@import './utilities/layout/z-index';
+
+@import './utilities/flex/direction';
+@import './utilities/flex/flex';
+@import './utilities/flex/grow';
+@import './utilities/flex/order';
+@import './utilities/flex/shrink';
+@import './utilities/flex/wrap';
+
+@import './utilities/grid/auto-columns';
+@import './utilities/grid/auto-flow';
+@import './utilities/grid/auto-rows';
+@import './utilities/grid/column-start-end';
+@import './utilities/grid/columns';
+@import './utilities/grid/gap';
+@import './utilities/grid/row-start-end';
+@import './utilities/grid/rows';
 
 @import './utilities/spacing/margin';
 @import './utilities/spacing/padding';

scss/_variables.scss

@@ -228,6 +228,20 @@ $spacing: (
   96: px2rem(384px)
 ) !default;
 
+$inset: map-merge(
+  $spacing,
+  (
+    auto: auto,
+    '1/2': 50%,
+    '1/3': 33.333333%,
+    '2/3': 66.666667%,
+    '1/4': 25%,
+    '2/4': 50%,
+    '3/4': 75%,
+    'full': 100%
+  )
+) !default;
+
 $widths: map-merge(
   $spacing,
   (

scss/components/form/_transfer.scss

@@ -46,6 +46,7 @@
     flex-grow: 1;
     max-height: 100%;
     overflow: auto;
+    position: relative; // 貌似不加 relative 会有 bug。
   }
 
   &-search + &-checkboxes {

scss/utilities/background/_background-color.scss

@@ -1,20 +1,28 @@
-@mixin bg-colors-map($colors: $colors, $namePrefix: '', $prefix: '.') {
+@mixin bg-colors-map(
+  $colors: $colors,
+  $namePrefix: '',
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $color in $colors {
     @if (is-map($color)) {
-      @include bg-colors-map($color, #{'-' + $name}, $prefix);
+      @include bg-colors-map($color, #{'-' + $name}, $prefix, $suffix);
     } @else {
-      #{$prefix}bg#{$namePrefix}-#{'' + $name} {
+      #{$prefix}bg#{$namePrefix}-#{'' + $name}#{$suffix} {
         background-color: $color;
       }
     }
   }
 }
 
-@mixin bg-colors($prefix: '.') {
+@mixin bg-colors($prefix: '.', $suffix: '') {
-  #{$prefix}bg-transparent {
+  #{$prefix}bg-transparent#{$suffix} {
     background-color: transparent;
   }
-  @include bg-colors-map($colors, '', $prefix);
+  #{$prefix}bg-none#{$suffix} {
+    background: none !important;
+  }
+  @include bg-colors-map($colors, '', $prefix, $suffix);
 }
 
 @include bg-colors();
@@ -23,7 +31,9 @@
     @include bg-colors('.' + selector-escape($deivce + ':'));
   }
 }
-// todo 设成 mobile\:bg-xxx {}  这样的，这样用户可选择性决定 mobile:bg-xxx 来给移动端设置不同的颜色。
+
+@include bg-colors('.' + selector-escape('hover:'), ':hover');
+@include bg-colors('.group:hover .' + selector-escape('group-hover:'));
 
 // 这是原来的，看来是有些 breakchange
 // .bg-light {

scss/utilities/border/_border-color.scss

@@ -1,17 +1,22 @@
-@mixin border-colors-map($colors: $colors, $namePrefix: '', $prefix: '.') {
+@mixin border-colors-map(
+  $colors: $colors,
+  $namePrefix: '',
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $color in $colors {
     @if (is-map($color)) {
-      @include border-colors-map($color, #{'-' + $name}, $prefix);
+      @include border-colors-map($color, #{'-' + $name}, $prefix, $suffix);
     } @else {
-      #{$prefix}border#{$namePrefix}-#{'' + $name} {
+      #{$prefix}border#{$namePrefix}-#{'' + $name}#{$suffix} {
         border-color: $color;
       }
     }
   }
 }
 
-@mixin border-colors($prefix: '.') {
+@mixin border-colors($prefix: '.', $suffix: '') {
-  @include border-colors-map($colors, '', $prefix);
+  @include border-colors-map($colors, '', $prefix, $suffix);
 }
 
 @include border-colors();
@@ -20,3 +25,6 @@
     @include border-colors('.' + selector-escape($deivce + ':'));
   }
 }
+
+@include border-colors('.' + selector-escape('hover:'), ':hover');
+@include border-colors('.group:hover .' + selector-escape('group-hover:'));

scss/utilities/flex/_direction.scss

@@ -0,0 +1,25 @@
+@mixin make-flex-direction($prefix: '.') {
+  #{$prefix}flex-row {
+    flex-direction: row;
+  }
+
+  #{$prefix}flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  #{$prefix}flex-col {
+    flex-direction: column;
+  }
+  #{$prefix}flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+@include make-flex-direction();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-flex-direction('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

scss/utilities/flex/_flex.scss

@@ -0,0 +1,23 @@
+@mixin make-flex($prefix: '.') {
+  #{$prefix}flex-1 {
+    flex: 1 1 0%;
+  }
+
+  #{$prefix}flex-auto {
+    flex: 1 1 auto;
+  }
+
+  #{$prefix}flex-initial {
+    flex: 0 1 auto;
+  }
+  #{$prefix}flex-none {
+    flex: none;
+  }
+}
+
+@include make-flex();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-flex('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/flex/_grow.scss

@@ -0,0 +1,15 @@
+@mixin make-flex-grow($prefix: '.') {
+  #{$prefix}flex-grow-0 {
+    flex-grow: 0;
+  }
+  #{$prefix}flex-grow {
+    flex-grow: 1;
+  }
+}
+
+@include make-flex-grow();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-flex-grow('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/flex/_order.scss

@@ -0,0 +1,32 @@
+@mixin make-flex-order($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        '1': 1,
+        '2': 2,
+        '3': 3,
+        '4': 4,
+        '5': 5,
+        '6': 6,
+        '7': 7,
+        '8': 8,
+        '9': 9,
+        '10': 10,
+        '11': 11,
+        '12': 12,
+        'first': -9999,
+        'last': 9999
+      )
+  {
+    #{$prefix + 'order-' + $name} {
+      order: $value;
+    }
+  }
+}
+
+@include make-flex-order();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-flex-order('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/flex/_shrink.scss

@@ -0,0 +1,15 @@
+@mixin make-flex-shrink($prefix: '.') {
+  #{$prefix}flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  #{$prefix}flex-shrink {
+    flex-shrink: 1;
+  }
+}
+
+@include make-flex-shrink();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-flex-shrink('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/flex/_wrap.scss

@@ -0,0 +1,22 @@
+@mixin make-flex-wrap($prefix: '.') {
+  #{$prefix}flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  #{$prefix}flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  #{$prefix}flex-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+@include make-flex-wrap();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-flex-wrap('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

scss/utilities/grid/_auto-columns.scss

@@ -0,0 +1,23 @@
+@mixin make-grid-auto-columns($prefix: '.') {
+  #{$prefix}auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  #{$prefix}auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  #{$prefix}auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  #{$prefix}auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+}
+
+@include make-grid-auto-columns();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-auto-columns('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_auto-flow.scss

@@ -0,0 +1,23 @@
+@mixin make-grid-auto-flow($prefix: '.') {
+  #{$prefix}grid-flow-row {
+    grid-auto-flow: row;
+  }
+
+  #{$prefix}grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  #{$prefix}grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+  #{$prefix}grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+
+@include make-grid-auto-flow();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-auto-flow('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_auto-rows.scss

@@ -0,0 +1,23 @@
+@mixin make-grid-auto-rows($prefix: '.') {
+  #{$prefix}auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  #{$prefix}auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  #{$prefix}auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  #{$prefix}auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+}
+
+@include make-grid-auto-rows();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-auto-rows('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_column-start-end.scss

@@ -0,0 +1,148 @@
+@mixin make-grid-span($prefix: '.') {
+  #{$prefix}col-auto {
+    grid-column: auto;
+  }
+
+  #{$prefix}col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  #{$prefix}col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  #{$prefix}col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  #{$prefix}col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  #{$prefix}col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  #{$prefix}col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  #{$prefix}col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  #{$prefix}col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  #{$prefix}col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  #{$prefix}col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  #{$prefix}col-span-11 {
+    grid-column: span 11 / span 1;
+  }
+  #{$prefix}col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  #{$prefix}col-span-full {
+    grid-column: 1 / -1;
+  }
+}
+
+@mixin make-grid-start($prefix: '.') {
+  #{$prefix}col-start-1 {
+    grid-column-start: 1;
+  }
+  #{$prefix}col-start-2 {
+    grid-column-start: 2;
+  }
+  #{$prefix}col-start-3 {
+    grid-column-start: 3;
+  }
+  #{$prefix}col-start-4 {
+    grid-column-start: 4;
+  }
+  #{$prefix}col-start-5 {
+    grid-column-start: 5;
+  }
+  #{$prefix}col-start-6 {
+    grid-column-start: 6;
+  }
+  #{$prefix}col-start-7 {
+    grid-column-start: 7;
+  }
+  #{$prefix}col-start-8 {
+    grid-column-start: 8;
+  }
+  #{$prefix}col-start-9 {
+    grid-column-start: 9;
+  }
+  #{$prefix}col-start-10 {
+    grid-column-start: 10;
+  }
+  #{$prefix}col-start-11 {
+    grid-column-start: 11;
+  }
+  #{$prefix}col-start-12 {
+    grid-column-start: 12;
+  }
+  #{$prefix}col-start-13 {
+    grid-column-start: 13;
+  }
+  #{$prefix}col-start-auto {
+    grid-column-start: auto;
+  }
+}
+
+@mixin make-grid-end($prefix: '.') {
+  #{$prefix}col-end-1 {
+    grid-column-end: 1;
+  }
+  #{$prefix}col-end-2 {
+    grid-column-end: 2;
+  }
+  #{$prefix}col-end-3 {
+    grid-column-end: 3;
+  }
+  #{$prefix}col-end-4 {
+    grid-column-end: 4;
+  }
+  #{$prefix}col-end-5 {
+    grid-column-end: 5;
+  }
+  #{$prefix}col-end-6 {
+    grid-column-end: 6;
+  }
+  #{$prefix}col-end-7 {
+    grid-column-end: 7;
+  }
+  #{$prefix}col-end-8 {
+    grid-column-end: 8;
+  }
+  #{$prefix}col-end-9 {
+    grid-column-end: 9;
+  }
+  #{$prefix}col-end-10 {
+    grid-column-end: 10;
+  }
+  #{$prefix}col-end-11 {
+    grid-column-end: 11;
+  }
+  #{$prefix}col-end-12 {
+    grid-column-end: 12;
+  }
+  #{$prefix}col-end-13 {
+    grid-column-end: 13;
+  }
+  #{$prefix}col-end-auto {
+    grid-column-end: auto;
+  }
+}
+
+@include make-grid-span();
+@include make-grid-start();
+@include make-grid-end();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-span('.' + selector-escape($deivce + ':'));
+    @include make-grid-start('.' + selector-escape($deivce + ':'));
+    @include make-grid-end('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_columns.scss

@@ -0,0 +1,50 @@
+@mixin make-grid-columns($prefix: '.') {
+  #{$prefix}grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-7 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  #{$prefix}grid-cols-none {
+    grid-template-columns: none;
+  }
+}
+
+@include make-grid-columns();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-columns('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_gap.scss

@@ -0,0 +1,32 @@
+@mixin make-gaps($prefix: '.') {
+  @each $name, $value in $spacing {
+    @if $name == default {
+      #{$prefix}gap {
+        gap: $value;
+      }
+      #{$prefix}gap-x {
+        column-gap: $value;
+      }
+      #{$prefix}gap-y {
+        row-gap: $value;
+      }
+    } @else {
+      #{$prefix}gap-#{'' + selector-escape($name)} {
+        gap: $value;
+      }
+      #{$prefix}gap-x-#{'' + selector-escape($name)} {
+        column-gap: $value;
+      }
+      #{$prefix}gap-y-#{'' + selector-escape($name)} {
+        row-gap: $value;
+      }
+    }
+  }
+}
+
+@include make-gaps();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-gaps('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_row-start-end.scss

@@ -0,0 +1,148 @@
+@mixin make-grid-row-span($prefix: '.') {
+  #{$prefix}row-auto {
+    grid-row: auto;
+  }
+
+  #{$prefix}row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+
+  #{$prefix}row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  #{$prefix}row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  #{$prefix}row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  #{$prefix}row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  #{$prefix}row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  #{$prefix}row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  #{$prefix}row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  #{$prefix}row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  #{$prefix}row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  #{$prefix}row-span-11 {
+    grid-row: span 11 / span 1;
+  }
+  #{$prefix}row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+
+  #{$prefix}row-span-full {
+    grid-row: 1 / -1;
+  }
+}
+
+@mixin make-grid-row-start($prefix: '.') {
+  #{$prefix}row-start-1 {
+    grid-row-start: 1;
+  }
+  #{$prefix}row-start-2 {
+    grid-row-start: 2;
+  }
+  #{$prefix}row-start-3 {
+    grid-row-start: 3;
+  }
+  #{$prefix}row-start-4 {
+    grid-row-start: 4;
+  }
+  #{$prefix}row-start-5 {
+    grid-row-start: 5;
+  }
+  #{$prefix}row-start-6 {
+    grid-row-start: 6;
+  }
+  #{$prefix}row-start-7 {
+    grid-row-start: 7;
+  }
+  #{$prefix}row-start-8 {
+    grid-row-start: 8;
+  }
+  #{$prefix}row-start-9 {
+    grid-row-start: 9;
+  }
+  #{$prefix}row-start-10 {
+    grid-row-start: 10;
+  }
+  #{$prefix}row-start-11 {
+    grid-row-start: 11;
+  }
+  #{$prefix}row-start-12 {
+    grid-row-start: 12;
+  }
+  #{$prefix}row-start-13 {
+    grid-row-start: 13;
+  }
+  #{$prefix}row-start-auto {
+    grid-row-start: auto;
+  }
+}
+
+@mixin make-grid-row-end($prefix: '.') {
+  #{$prefix}row-end-1 {
+    grid-row-end: 1;
+  }
+  #{$prefix}row-end-2 {
+    grid-row-end: 2;
+  }
+  #{$prefix}row-end-3 {
+    grid-row-end: 3;
+  }
+  #{$prefix}row-end-4 {
+    grid-row-end: 4;
+  }
+  #{$prefix}row-end-5 {
+    grid-row-end: 5;
+  }
+  #{$prefix}row-end-6 {
+    grid-row-end: 6;
+  }
+  #{$prefix}row-end-7 {
+    grid-row-end: 7;
+  }
+  #{$prefix}row-end-8 {
+    grid-row-end: 8;
+  }
+  #{$prefix}row-end-9 {
+    grid-row-end: 9;
+  }
+  #{$prefix}row-end-10 {
+    grid-row-end: 10;
+  }
+  #{$prefix}row-end-11 {
+    grid-row-end: 11;
+  }
+  #{$prefix}row-end-12 {
+    grid-row-end: 12;
+  }
+  #{$prefix}row-end-13 {
+    grid-row-end: 13;
+  }
+  #{$prefix}row-end-auto {
+    grid-row-end: auto;
+  }
+}
+
+@include make-grid-row-span();
+@include make-grid-row-start();
+@include make-grid-row-end();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-row-span('.' + selector-escape($deivce + ':'));
+    @include make-grid-row-start('.' + selector-escape($deivce + ':'));
+    @include make-grid-row-end('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/grid/_rows.scss

@@ -0,0 +1,32 @@
+@mixin make-grid-rows($prefix: '.') {
+  #{$prefix}grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  #{$prefix}grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+  #{$prefix}grid-rows-none {
+    grid-template-rows: none;
+  }
+}
+
+@include make-grid-rows();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-grid-rows('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/layout/_display.scss

@@ -2,25 +2,25 @@
   @each $name,
     $value
       in (
-        block: block,
+        'block': block,
-        inline-block: inline-block,
+        'inline-block': inline-block,
-        inline: inline,
+        'inline': inline,
-        flex: flex,
+        'flex': flex,
-        inline-flex: inline-flex,
+        'inline-flex': inline-flex,
-        table: table,
+        'table': table,
-        table-caption: table-caption,
+        'table-caption': table-caption,
-        table-cell: table-cell,
+        'table-cell': table-cell,
-        table-column: table-column,
+        'table-column': table-column,
-        table-column-group: table-column-group,
+        'table-column-group': table-column-group,
-        table-footer-group: table-footer-group,
+        'table-footer-group': table-footer-group,
-        table-header-group: table-header-group,
+        'table-header-group': table-header-group,
-        table-row-group: table-row-group,
+        'table-row-group': table-row-group,
-        table-row: table-row,
+        'table-row': table-row,
-        flow-root: flow-root,
+        'flow-root': flow-root,
-        grid: grid,
+        'grid': grid,
-        inline-grid: inline-grid,
+        'inline-grid': inline-grid,
-        contents: contents,
+        'contents': contents,
-        hidden: none
+        'hidden': none
       )
   {
     #{$prefix + $name} {

scss/utilities/layout/_overflow.scss

@@ -0,0 +1,45 @@
+@mixin make-overflow($prefix: '.') {
+  #{$prefix}overflow-auto {
+    overflow: auto;
+  }
+  #{$prefix}overflow-hidden {
+    overflow: hidden;
+  }
+  #{$prefix}overflow-visible {
+    overflow: visible;
+  }
+  #{$prefix}overflow-scroll {
+    overflow: scroll;
+  }
+  #{$prefix}overflow-x-auto {
+    overflow-x: auto;
+  }
+  #{$prefix}overflow-y-auto {
+    overflow-y: auto;
+  }
+  #{$prefix}overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  #{$prefix}overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  #{$prefix}overflow-x-visible {
+    overflow-x: visible;
+  }
+  #{$prefix}overflow-y-visible {
+    overflow-y: visible;
+  }
+  #{$prefix}overflow-x-scroll {
+    overflow-x: scroll;
+  }
+  #{$prefix}overflow-y-scroll {
+    overflow-y: scroll;
+  }
+}
+
+@include make-overflow();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-overflow('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/layout/_top-right-bottom-left.scss

@@ -0,0 +1,95 @@
+@mixin make-single-position(
+  $selector,
+  $direction,
+  $name,
+  $value,
+  $prefix: '.'
+) {
+  #{$prefix}#{'' + selector-escape($selector + '-' + $name) } {
+    #{$direction}: $value;
+  }
+}
+
+@mixin make-single-positions($direction, $map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    @include make-single-position($direction, $direction, $name, $value);
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      @include make-single-position(
+        #{$direction + '-n'},
+        $direction,
+        $name,
+        ($value * -1)
+      );
+    }
+  }
+}
+
+@mixin make-inset-positions($map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    #{$prefix}#{selector-escape('inset-' + $name) } {
+      top: $value;
+      right: $value;
+      bottom: $value;
+      left: $value;
+    }
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      #{$prefix}#{selector-escape('inset-n-' + $name) } {
+        top: $value * -1;
+        right: $value * -1;
+        bottom: $value * -1;
+        left: $value * -1;
+      }
+    }
+  }
+}
+
+@mixin make-inset-x-positions($map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    #{$prefix}#{selector-escape('inset-x-' + $name) } {
+      right: $value;
+      left: $value;
+    }
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      #{$prefix}#{selector-escape('inset-n-' + $name) } {
+        right: $value * -1;
+        left: $value * -1;
+      }
+    }
+  }
+}
+
+@mixin make-inset-y-positions($map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    #{$prefix}#{selector-escape('inset-y-' + $name) } {
+      top: $value;
+      bottom: $value;
+    }
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      #{$prefix}#{selector-escape('inset-y-' + $name) } {
+        top: $value * -1;
+        bottom: $value * -1;
+      }
+    }
+  }
+}
+
+@include make-single-positions('top');
+@include make-single-positions('right');
+@include make-single-positions('bottom');
+@include make-single-positions('left');
+
+@include make-inset-positions();
+@include make-inset-x-positions();
+@include make-inset-y-positions();

scss/utilities/layout/_visibility.scss

@@ -0,0 +1,22 @@
+@mixin make-visibility($prefix: '.') {
+  #{$prefix}visible {
+    visibility: visible;
+  }
+
+  #{$prefix}invisible {
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+
+  #{$prefix}invisible2 {
+    visibility: hidden;
+  }
+}
+
+@include make-visibility();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-visibility('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/layout/_z-index.scss

@@ -0,0 +1,25 @@
+@mixin make-z-index($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        '0': 0,
+        '10': 10,
+        '20': 20,
+        '30': 30,
+        '40': 40,
+        '50': 50,
+        'auto': auto
+      )
+  {
+    #{$prefix + 'z-' + $name} {
+      z-index: $value;
+    }
+  }
+}
+
+@include make-z-index();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-z-index('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/sizing/_height.scss

@@ -1,43 +1,52 @@
-@mixin height-sizing($map: $heights, $prefix: '') {
+@mixin height-sizing($map: $heights, $prefix: '.') {
   @each $name, $value in $map {
     @if $name == default {
-      #{$prefix}.h {
+      #{$prefix}h {
         height: $value;
       }
     } @else {
-      #{$prefix}.h-#{'' + selector-escape($name)} {
+      #{$prefix}h-#{'' + selector-escape($name)} {
         height: $value;
       }
     }
   }
 }
 
-@mixin max-height-sizing($map: $maxHeights, $prefix: '') {
+@mixin max-height-sizing($map: $maxHeights, $prefix: '.') {
   @each $name, $value in $map {
     @if $name == default {
-      #{$prefix}.max-h {
+      #{$prefix}max-h {
         max-height: $value;
       }
     } @else {
-      #{$prefix}.max-h-#{'' + selector-escape($name)} {
+      #{$prefix}max-h-#{'' + selector-escape($name)} {
         max-height: $value;
       }
     }
   }
 }
 
-@include height-sizing();
+@mixin make-heights($prefix: '.') {
+  @include height-sizing($heights, $prefix);
 
-.min-h-0 {
+  #{$prefix}min-h-0 {
     min-height: 0px;
-}
+  }
 
-.min-h-full {
+  #{$prefix}min-h-full {
     min-height: 100%;
-}
+  }
 
-.min-h-screen {
+  #{$prefix}min-h-screen {
     min-height: 100vh;
+  }
+
+  @include max-height-sizing($maxHeights, $prefix);
 }
 
-@include max-height-sizing();
+@include make-heights();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-heights('.' + selector-escape($deivce + ':'));
+  }
+}

scss/utilities/sizing/_width.scss

@@ -1,49 +1,58 @@
-@mixin width-sizing($map: $widths, $prefix: '') {
+@mixin width-sizing($map: $widths, $prefix: '.') {
   @each $name, $value in $map {
     @if $name == default {
-      #{$prefix}.w {
+      #{$prefix}w {
         width: $value;
       }
     } @else {
-      #{$prefix}.w-#{'' + selector-escape($name)} {
+      #{$prefix}w-#{'' + selector-escape($name)} {
         width: $value;
       }
     }
   }
 }
 
-@mixin max-width-sizing($map: $maxWidths, $prefix: '') {
+@mixin max-width-sizing($map: $maxWidths, $prefix: '.') {
   @each $name, $value in $map {
     @if $name == default {
-      #{$prefix}.max-w {
+      #{$prefix}max-w {
         max-width: $value;
       }
     } @else {
-      #{$prefix}.max-w-#{'' + selector-escape($name)} {
+      #{$prefix}max-w-#{'' + selector-escape($name)} {
         max-width: $value;
       }
     }
   }
 }
 
-@include width-sizing();
+@mixin make-widths($prefix: '.') {
-.min-w-0 {
+  @include width-sizing($widths, $prefix);
+  #{$prefix}min-w-0 {
     min-width: 0px;
-}
+  }
 
-.min-w-full {
+  #{$prefix}min-w-full {
     min-width: 100%;
-}
+  }
 
-.min-w-min {
+  #{$prefix}min-w-min {
     min-width: min-content;
-}
+  }
 
-.min-w-max {
+  #{$prefix}min-w-max {
     min-width: max-content;
+  }
+
+  @include max-width-sizing($maxWidths, $prefix);
 }
 
-@include max-width-sizing();
+@include make-widths();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-widths('.' + selector-escape($deivce + ':'));
+  }
+}
 
 // .w-1x {
 //   width: 1em;

scss/utilities/typography/_text-color.scss

@@ -1,30 +1,35 @@
-@mixin text-colors-map($colors: $colors, $namePrefix: '', $prefix: '.') {
+@mixin text-colors-map(
+  $colors: $colors,
+  $namePrefix: '',
+  $prefix: '.',
+  $suffix: ''
+) {
   @each $name, $color in $colors {
     @if (is-map($color)) {
-      @include text-colors-map($color, #{'-' + $name}, $prefix);
+      @include text-colors-map($color, #{'-' + $name}, $prefix, $suffix);
     } @else {
-      #{$prefix}text#{$namePrefix}-#{'' + $name} {
+      #{$prefix}text#{$namePrefix}-#{'' + $name}#{$suffix} {
         color: $color;
       }
     }
   }
 }
 
-@mixin text-colors($prefix: '.') {
+@mixin text-colors($prefix: '.', $suffix: '') {
-  #{$prefix}text-transparent {
+  #{$prefix}text-transparent#{$suffix} {
     color: transparent;
   }
-  #{$prefix}text-current {
+  #{$prefix}text-current#{$suffix} {
     color: currentColor;
   }
-  #{$prefix}text-muted {
+  #{$prefix}text-muted#{$suffix} {
     color: $text--muted-color;
   }
-  #{$prefix}text-loud {
+  #{$prefix}text-loud#{$suffix} {
     color: $text--loud-color;
   }
 
-  @include text-colors-map($colors, '', #{$prefix});
+  @include text-colors-map($colors, '', $prefix, $suffix);
 }
 
 @include text-colors();
@@ -34,6 +39,8 @@
   }
 }
 
+@include text-colors('.' + selector-escape('hover:'), ':hover');
+@include text-colors('.group:hover .' + selector-escape('group-hover:'));
 // text colors
 
 // @include text-wariant($primary, primary);