@matteusan/himig 1.7.4 → 1.8.1

package/ms-utils/_struct-utils.scss

@@ -26,12 +26,12 @@ $_variants: (
   '6xl',
 );
 $_directions: (
-  't': top,
-  'l': left,
-  'b': bottom,
-  'r': right,
-  'x': (left, right),
-  'y': (top, bottom)
+  't': block-start,
+  'l': inline-start,
+  'b': block-end,
+  'r': inline-end,
+  'x': inline,
+  'y': block
 );
 $_r-directions: (
   'tl': top-left,
@@ -80,223 +80,225 @@ $_stroke-style: (
     'border-style'
   ), $include, $exclude);
 
-  @each $dimension in $_dimensions {
-    @if list.index($utils-to-render, 'w') {
-      // Width
-      .w-#{$dimension} {
-        width: pintig.primitive-token-get('width.#{$dimension}');
-      }
-
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:w-#{$dimension} {
-          @include pintig.breakpoint-create($breakpoint) {
-            width: pintig.primitive-token-get('width.#{$dimension}') !important;
-          }
+  @layer utils {
+    @each $dimension in $_dimensions {
+      @if list.index($utils-to-render, 'w') {
+        // Width
+        .w-#{$dimension} {
+          width: pintig.primitive-token-get('width.#{$dimension}');
         }
-      }
-
-      // Min Width
-      .min-w-#{$dimension} {
-        min-width: pintig.primitive-token-get('width.#{$dimension}');
-      }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:min-w-#{$dimension} {
-          @include pintig.breakpoint-create($breakpoint) {
-            min-width: pintig.primitive-token-get('width.#{$dimension}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:w-#{$dimension} {
+            @include pintig.breakpoint-create($breakpoint) {
+              width: pintig.primitive-token-get('width.#{$dimension}') !important;
+            }
           }
         }
-      }
-
-      // Max Width
-      .max-w-#{$dimension} {
-        max-width: pintig.primitive-token-get('width.#{$dimension}');
-      }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:max-w-#{$dimension} {
-          @include pintig.breakpoint-create($breakpoint) {
-            max-width: pintig.primitive-token-get('width.#{$dimension}') !important;
-          }
+        // Min Width
+        .min-w-#{$dimension} {
+          min-width: pintig.primitive-token-get('width.#{$dimension}');
         }
-      }
-    }
 
-    @if list.index($utils-to-render, 'h') {
-      // Height
-      .h-#{$dimension} {
-        height: pintig.primitive-token-get('height.#{$dimension}');
-      }
-
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:h-#{$dimension} {
-          @include pintig.breakpoint-create($breakpoint) {
-            height: pintig.primitive-token-get('height.#{$dimension}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:min-w-#{$dimension} {
+            @include pintig.breakpoint-create($breakpoint) {
+              min-width: pintig.primitive-token-get('width.#{$dimension}') !important;
+            }
           }
         }
-      }
 
-      // Min Height
-      .min-h-#{$dimension} {
-        min-height: pintig.primitive-token-get('height.#{$dimension}');
-      }
+        // Max Width
+        .max-w-#{$dimension} {
+          max-width: pintig.primitive-token-get('width.#{$dimension}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:min-h-#{$dimension} {
-          @include pintig.breakpoint-create($breakpoint) {
-            min-height: pintig.primitive-token-get('height.#{$dimension}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:max-w-#{$dimension} {
+            @include pintig.breakpoint-create($breakpoint) {
+              max-width: pintig.primitive-token-get('width.#{$dimension}') !important;
+            }
           }
         }
       }
 
-      // Max Height
-      .max-h-#{$dimension} {
-        max-height: pintig.primitive-token-get('height.#{$dimension}');
-      }
+      @if list.index($utils-to-render, 'h') {
+        // Height
+        .h-#{$dimension} {
+          height: pintig.primitive-token-get('height.#{$dimension}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:max-h-#{$dimension} {
-          @include pintig.breakpoint-create($breakpoint) {
-            max-height: pintig.primitive-token-get('height.#{$dimension}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:h-#{$dimension} {
+            @include pintig.breakpoint-create($breakpoint) {
+              height: pintig.primitive-token-get('height.#{$dimension}') !important;
+            }
           }
         }
-      }
-    }
-  }
 
-  @each $variant in $_variants {
-    @if list.index($utils-to-render, 'p') {
-      // Padding
-      .p-#{$variant} {
-        padding: pintig.primitive-token-get('padding.#{$variant}');
-      }
+        // Min Height
+        .min-h-#{$dimension} {
+          min-height: pintig.primitive-token-get('height.#{$dimension}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:p-#{$variant} {
-          @include pintig.breakpoint-create($breakpoint) {
-            padding: pintig.primitive-token-get('padding.#{$variant}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:min-h-#{$dimension} {
+            @include pintig.breakpoint-create($breakpoint) {
+              min-height: pintig.primitive-token-get('height.#{$dimension}') !important;
+            }
           }
         }
-      }
 
-      @each $direction, $direction-val in $_directions {
-        .p#{$direction}-#{$variant} {
-          @each $sub-direction in $direction-val {
-            padding-#{$sub-direction}: pintig.primitive-token-get('padding.#{$variant}');
-          }
+        // Max Height
+        .max-h-#{$dimension} {
+          max-height: pintig.primitive-token-get('height.#{$dimension}');
         }
 
         @each $breakpoint in $_breakpoints {
-          .\@#{$breakpoint}\:p#{$direction}-#{$variant} {
+          .\@#{$breakpoint}\:max-h-#{$dimension} {
             @include pintig.breakpoint-create($breakpoint) {
-              @each $sub-direction in $direction-val {
-                padding-#{$sub-direction}: pintig.primitive-token-get('padding.#{$variant}') !important;
-              }
+              max-height: pintig.primitive-token-get('height.#{$dimension}') !important;
             }
           }
         }
       }
     }
 
-    @if list.index($utils-to-render, 'm') {
-      // Margin
-      .m-#{$variant} {
-        margin: pintig.primitive-token-get('margin.#{$variant}');
-      }
+    @each $variant in $_variants {
+      @if list.index($utils-to-render, 'p') {
+        // Padding
+        .p-#{$variant} {
+          padding: pintig.primitive-token-get('padding.#{$variant}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:m-#{$variant} {
-          @include pintig.breakpoint-create($breakpoint) {
-            margin: pintig.primitive-token-get('margin.#{$variant}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:p-#{$variant} {
+            @include pintig.breakpoint-create($breakpoint) {
+              padding: pintig.primitive-token-get('padding.#{$variant}') !important;
+            }
           }
         }
-      }
 
-      @each $direction, $direction-val in $_directions {
-        .m#{$direction}-#{$variant} {
-          @each $sub-direction in $direction-val {
-            margin-#{$sub-direction}: pintig.primitive-token-get('margin.#{$variant}');
+        @each $direction, $direction-val in $_directions {
+          .p#{$direction}-#{$variant} {
+            @each $sub-direction in $direction-val {
+              padding-#{$sub-direction}: pintig.primitive-token-get('padding.#{$variant}');
+            }
           }
-        }
 
-        @each $breakpoint in $_breakpoints {
-          .\@#{$breakpoint}\:m#{$direction}-#{$variant} {
-            @include pintig.breakpoint-create($breakpoint) {
-              @each $sub-direction in $direction-val {
-                margin-#{$sub-direction}: pintig.primitive-token-get('margin.#{$variant}') !important;
+          @each $breakpoint in $_breakpoints {
+            .\@#{$breakpoint}\:p#{$direction}-#{$variant} {
+              @include pintig.breakpoint-create($breakpoint) {
+                @each $sub-direction in $direction-val {
+                  padding-#{$sub-direction}: pintig.primitive-token-get('padding.#{$variant}') !important;
+                }
               }
             }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'r') {
-      // Border Radius
-      @if $variant == 'auto' {
-        // Do nothing
-      } @else {
-        .r-#{$variant} {
-          border-radius: pintig.primitive-token-get('radius.#{$variant}');
+      @if list.index($utils-to-render, 'm') {
+        // Margin
+        .m-#{$variant} {
+          margin: pintig.primitive-token-get('margin.#{$variant}');
         }
 
         @each $breakpoint in $_breakpoints {
-          .\@#{$breakpoint}\:r-#{$variant} {
+          .\@#{$breakpoint}\:m-#{$variant} {
             @include pintig.breakpoint-create($breakpoint) {
-              border-radius: pintig.primitive-token-get('radius.#{$variant}') !important;
+              margin: pintig.primitive-token-get('margin.#{$variant}') !important;
             }
           }
         }
 
-        @each $direction, $direction-val in $_r-directions {
-          .r#{$direction}-#{$variant} {
+        @each $direction, $direction-val in $_directions {
+          .m#{$direction}-#{$variant} {
             @each $sub-direction in $direction-val {
-              border-#{$sub-direction}-radius: pintig.primitive-token-get('radius.#{$variant}');
+              margin-#{$sub-direction}: pintig.primitive-token-get('margin.#{$variant}');
             }
           }
 
           @each $breakpoint in $_breakpoints {
-            .\@#{$breakpoint}\:r#{$direction}-#{$variant} {
+            .\@#{$breakpoint}\:m#{$direction}-#{$variant} {
               @include pintig.breakpoint-create($breakpoint) {
                 @each $sub-direction in $direction-val {
-                  border-#{$sub-direction}-radius: pintig.primitive-token-get('radius.#{$variant}') !important;
+                  margin-#{$sub-direction}: pintig.primitive-token-get('margin.#{$variant}') !important;
                 }
               }
             }
           }
         }
       }
-    }
-  }
 
-  @if list.index($utils-to-render, 'border-width') {
-    @each $variant in $_stroke-size {
-      // Border Width
-      .border-#{$variant} {
-        border-width: pintig.primitive-token-get('border.#{$variant}');
-      }
+      @if list.index($utils-to-render, 'r') {
+        // Border Radius
+        @if $variant == 'auto' {
+          // Do nothing
+        } @else {
+          .r-#{$variant} {
+            border-radius: pintig.primitive-token-get('radius.#{$variant}');
+          }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:border-#{$variant} {
-          @include pintig.breakpoint-create($breakpoint) {
-            border-width: pintig.primitive-token-get('border.#{$variant}') !important;
+          @each $breakpoint in $_breakpoints {
+            .\@#{$breakpoint}\:r-#{$variant} {
+              @include pintig.breakpoint-create($breakpoint) {
+                border-radius: pintig.primitive-token-get('radius.#{$variant}') !important;
+              }
+            }
+          }
+
+          @each $direction, $direction-val in $_r-directions {
+            .r#{$direction}-#{$variant} {
+              @each $sub-direction in $direction-val {
+                border-#{$sub-direction}-radius: pintig.primitive-token-get('radius.#{$variant}');
+              }
+            }
+
+            @each $breakpoint in $_breakpoints {
+              .\@#{$breakpoint}\:r#{$direction}-#{$variant} {
+                @include pintig.breakpoint-create($breakpoint) {
+                  @each $sub-direction in $direction-val {
+                    border-#{$sub-direction}-radius: pintig.primitive-token-get('radius.#{$variant}') !important;
+                  }
+                }
+              }
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'border-style') {
-    @each $variant in $_stroke-style {
-      // Border Style
-      .border-#{$variant} {
-        border-style: string.unquote($variant);
+    @if list.index($utils-to-render, 'border-width') {
+      @each $variant in $_stroke-size {
+        // Border Width
+        .border-#{$variant} {
+          border-width: pintig.primitive-token-get('border.#{$variant}');
+        }
+
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:border-#{$variant} {
+            @include pintig.breakpoint-create($breakpoint) {
+              border-width: pintig.primitive-token-get('border.#{$variant}') !important;
+            }
+          }
+        }
       }
+    }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:border-#{$variant} {
-          @include pintig.breakpoint-create($breakpoint) {
-            border-style: string.unquote($variant) !important;
+    @if list.index($utils-to-render, 'border-style') {
+      @each $variant in $_stroke-style {
+        // Border Style
+        .border-#{$variant} {
+          border-style: string.unquote($variant);
+        }
+
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:border-#{$variant} {
+            @include pintig.breakpoint-create($breakpoint) {
+              border-style: string.unquote($variant) !important;
+            }
           }
         }
       }

package/ms-utils/_typography-utils.scss

@@ -16,43 +16,50 @@ $_presets: (
     family: 'supertitle',
     size: 'supertitle',
     weight: 'supertitle',
-    line-height: 'supertitle'
+    line-height: 'supertitle',
+    squeeze: 'supertitle'
   ),
   'title': (
     family: 'title',
     size: 'title',
     weight: 'title',
-    line-height: 'title'
+    line-height: 'title',
+    squeeze: 'title'
   ),
   'subtitle': (
     family: 'subtitle',
     size: 'subtitle',
     weight: 'subtitle',
-    line-height: 'subtitle'
+    line-height: 'subtitle',
+    squeeze: 'subtitle'
   ),
   'body': (
     family: 'body',
     size: 'body',
     weight: 'body',
-    line-height: 'body'
+    line-height: 'body',
+    squeeze: 'body'
   ),
   'mono': (
     family: 'mono',
     size: 'mono',
     weight: 'mono',
-    line-height: 'mono'
+    line-height: 'mono',
+    squeeze: 'mono'
   ),
   'small': (
     family: 'small',
     size: 'small',
     weight: 'small',
-    line-height: 'small'
+    line-height: 'small',
+    squeeze: 'small'
   )
 );
 $_sizes: ('xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl');
 $_weights: ('black', 'bold', 'normal', 'light');
-$_line-heights: ('broad', 'normal', 'condensed');
+$_line-heights: ('broad', 'normal', 'condensed', 'tall', 'short');
 $_alignments: ('center', 'left', 'right', 'justify', 'justify-all');
+$_squeezes: ('tight', 'normal', 'loose');
 
 @mixin typography($include: (), $exclude: ()) {
   $utils-to-render: helpers.handle-include-exclude((
@@ -61,105 +68,126 @@ $_alignments: ('center', 'left', 'right', 'justify', 'justify-all');
     'size',
     'weight',
     'line-height',
-    'alignment'
+    'alignment',
+    'squeeze'
   ), $include, $exclude);
 
-  @if list.index($utils-to-render, 'preset') {
-    @each $preset, $values in $_presets {
-      .#{$preset} {
-        font-family: pintig.token-get('family-#{map.get($values, 'family')}');
-        font-size: pintig.token-get('size-#{map.get($values, 'size')}');
-        font-weight: pintig.token-switch('weight-#{map.get($values, 'weight')}', pintig.primitive-token-switch('weight.#{map.get($values, 'weight')}', $values));
-        line-height: pintig.token-switch('line-height-#{map.get($values, 'weight')}', pintig.primitive-token-switch('line-height.#{map.get($values, 'line-height')}', $values));
-      }
+  @layer utils {
+    @if list.index($utils-to-render, 'preset') {
+      @each $preset, $values in $_presets {
+        .#{$preset} {
+          font-family: pintig.token-get('family-#{map.get($values, 'family')}');
+          font-size: pintig.token-get('size-#{map.get($values, 'size')}');
+          font-weight: pintig.token-switch('weight-#{map.get($values, 'weight')}', pintig.primitive-token-switch('weight.#{map.get($values, 'weight')}', $values));
+          line-height: pintig.token-switch('line-height-#{map.get($values, 'weight')}', pintig.primitive-token-switch('line-height.#{map.get($values, 'line-height')}', $values));
+          letter-spacing: pintig.token-switch('squeeze-#{map.get($values, 'squeeze')}', pintig.primitive-token-switch('squeeze.#{map.get($values, 'squeeze')}', $values));
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:#{$preset} {
-          @include pintig.breakpoint-create($breakpoint) {
-            font-family: pintig.token-get('family-#{map.get($values, 'family')}') !important;
-            font-size: pintig.token-get('size-#{map.get($values, 'size')}') !important;
-            font-weight: pintig.token-switch('weight-#{map.get($values, 'weight')}', pintig.primitive-token-switch('weight.#{map.get($values, 'weight')}', $values));
-            line-height: pintig.token-switch('line-height-#{map.get($values, 'weight')}', pintig.primitive-token-switch('line-height.#{map.get($values, 'line-height')}', $values));
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:#{$preset} {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-family: pintig.token-get('family-#{map.get($values, 'family')}') !important;
+              font-size: pintig.token-get('size-#{map.get($values, 'size')}') !important;
+              font-weight: pintig.token-switch('weight-#{map.get($values, 'weight')}', pintig.primitive-token-switch('weight.#{map.get($values, 'weight')}', $values));
+              line-height: pintig.token-switch('line-height-#{map.get($values, 'weight')}', pintig.primitive-token-switch('line-height.#{map.get($values, 'line-height')}', $values));
+              letter-spacing: pintig.token-switch('squeeze-#{map.get($values, 'squeeze')}', pintig.primitive-token-switch('squeeze.#{map.get($values, 'squeeze')}', $values));
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'family') {
-    @each $preset, $values in $_presets {
-      .family-#{$preset} {
-        font-family: pintig.token-get('family-#{$preset}');
-      }
+    @if list.index($utils-to-render, 'family') {
+      @each $preset, $values in $_presets {
+        .family-#{$preset} {
+          font-family: pintig.token-get('family-#{$preset}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:family-#{$preset} {
-          @include pintig.breakpoint-create($breakpoint) {
-            font-family: pintig.token-get('family-#{$preset}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:family-#{$preset} {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-family: pintig.token-get('family-#{$preset}') !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'size') {
-    @each $size in $_sizes {
-      .size-#{$size} {
-        font-size: pintig.primitive-token-get('size.#{$size}');
-      }
+    @if list.index($utils-to-render, 'size') {
+      @each $size in $_sizes {
+        .size-#{$size} {
+          font-size: pintig.primitive-token-get('size.#{$size}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:size-#{$size} {
-          @include pintig.breakpoint-create($breakpoint) {
-            font-size: pintig.primitive-token-get('size.#{$size}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:size-#{$size} {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-size: pintig.primitive-token-get('size.#{$size}') !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'weight') {
-    @each $weight in $_weights {
-      .weight-#{$weight} {
-        font-weight: pintig.primitive-token-get('weight.#{$weight}');
-      }
+    @if list.index($utils-to-render, 'weight') {
+      @each $weight in $_weights {
+        .weight-#{$weight} {
+          font-weight: pintig.primitive-token-get('weight.#{$weight}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:weight-#{$weight} {
-          @include pintig.breakpoint-create($breakpoint) {
-            font-weight: pintig.primitive-token-get('weight.#{$weight}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:weight-#{$weight} {
+            @include pintig.breakpoint-create($breakpoint) {
+              font-weight: pintig.primitive-token-get('weight.#{$weight}') !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'line-height') {
-    @each $line-height in $_line-heights {
-      .line-height-#{$line-height} {
-        line-height: pintig.primitive-token-get('line-height.#{$line-height}');
-      }
+    @if list.index($utils-to-render, 'line-height') {
+      @each $line-height in $_line-heights {
+        .line-height-#{$line-height} {
+          line-height: pintig.primitive-token-get('line-height.#{$line-height}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:line-height-#{$line-height} {
-          @include pintig.breakpoint-create($breakpoint) {
-            line-height: pintig.primitive-token-get('line-height.#{$line-height}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:line-height-#{$line-height} {
+            @include pintig.breakpoint-create($breakpoint) {
+              line-height: pintig.primitive-token-get('line-height.#{$line-height}') !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'alignment') {
-    @each $alignment in $_alignments {
-      .align-#{$alignment} {
-        text-align: string.unquote($alignment);
+    @if list.index($utils-to-render, 'alignment') {
+      @each $alignment in $_alignments {
+        .align-#{$alignment} {
+          text-align: string.unquote($alignment);
+        }
+
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:align-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              text-align: string.unquote($alignment) !important;
+            }
+          }
+        }
       }
+    }
+
+    @if list.index($utils-to-render, 'squeeze') {
+      @each $squeeze in $_squeezes {
+        .squeeze-#{$squeeze} {
+          letter-spacing: pintig.primitive-token-get('squeeze.#{$squeeze}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:align-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            text-align: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:squeeze-#{$squeeze} {
+            @include pintig.breakpoint-create($breakpoint) {
+              letter-spacing: pintig.primitive-token-get('squeeze.#{$squeeze}') !important;
+            }
           }
         }
       }