npm - @inchurch/matcha-core - Versions diffs - 21.3.3 → 21.4.0 - Mend

@inchurch/matcha-core 21.3.3 → 21.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/core.scss CHANGED Viewed

@@ -514,6 +514,12 @@ $font-weight-token-map: (
 }
 @include generate-gap-classes($helper-breakpoints);
+// Gap de 2px — o gerador acima salta de 4 em 4 (0/4/8…); 2px = --matcha-space-025 (token DSV3).
+.gap-2 {
+    column-gap: var(--matcha-space-025, 2px);
+    row-gap: var(--matcha-space-025, 2px);
+}
 // -----------------------------------------------------------------------------------------------------
 // @ Z-index classes
 // -----------------------------------------------------------------------------------------------------
@@ -600,7 +606,7 @@ $font-weight-token-map: (
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-            @each $pos in (relative, absolute, static, fixed) {
+            @each $pos in (relative, absolute, static, fixed, sticky) {
                 .position#{$infix}-#{$pos} {
                     position: #{$pos};
                 }
@@ -1321,6 +1327,27 @@ $font-weight-token-map: (
             .border#{$infix}-none--force {
                 border: none !important;
             }
+            // Borda hairline (1px) — o loop acima só emite pares (0/2/4/6/8).
+            // 1px é o valor que faltava da família e é token DSV3: --matcha-border-hairline.
+            .border#{$infix}-1,
+            .b#{$infix}-1 {
+                border: var(--matcha-border-hairline, 1px) solid;
+            }
+            .border#{$infix}-1--force,
+            .b#{$infix}-1--force {
+                border: var(--matcha-border-hairline, 1px) solid !important;
+            }
+            @each $direction, $abbrev in $border-directions {
+                .border-#{$direction}#{$infix}-1,
+                .#{$abbrev}#{$infix}-1 {
+                    border-#{$direction}: var(--matcha-border-hairline, 1px) solid;
+                }
+                .border-#{$direction}#{$infix}-1--force,
+                .#{$abbrev}#{$infix}-1--force {
+                    border-#{$direction}: var(--matcha-border-hairline, 1px) solid !important;
+                }
+            }
         }
     }
@@ -1695,3 +1722,4 @@ $font-weight-token-map: (
 @include generate-masonry-classes($helper-breakpoints);

package/matcha-core.css CHANGED Viewed

@@ -52352,6 +52352,11 @@
     row-gap: var(--matcha-space-300, 24px);
   }
 }
+.gap-2 {
+  column-gap: var(--matcha-space-025, 2px);
+  row-gap: var(--matcha-space-025, 2px);
+}
 .z-index--1 {
   z-index: -1;
 }
@@ -54592,6 +54597,14 @@
   position: fixed !important;
 }
+.position-sticky {
+  position: sticky;
+}
+.position-sticky--force {
+  position: sticky !important;
+}
 @media screen and (max-width: 639px) {
   .position-xs-relative {
     position: relative;
@@ -54617,6 +54630,12 @@
   .position-xs-fixed--force {
     position: fixed !important;
   }
+  .position-xs-sticky {
+    position: sticky;
+  }
+  .position-xs-sticky--force {
+    position: sticky !important;
+  }
 }
 @media screen and (min-width: 640px) {
   .position-sm-relative {
@@ -54643,6 +54662,12 @@
   .position-sm-fixed--force {
     position: fixed !important;
   }
+  .position-sm-sticky {
+    position: sticky;
+  }
+  .position-sm-sticky--force {
+    position: sticky !important;
+  }
 }
 @media screen and (min-width: 1024px) {
   .position-md-relative {
@@ -54669,6 +54694,12 @@
   .position-md-fixed--force {
     position: fixed !important;
   }
+  .position-md-sticky {
+    position: sticky;
+  }
+  .position-md-sticky--force {
+    position: sticky !important;
+  }
 }
 @media screen and (min-width: 1280px) {
   .position-lg-relative {
@@ -54695,6 +54726,12 @@
   .position-lg-fixed--force {
     position: fixed !important;
   }
+  .position-lg-sticky {
+    position: sticky;
+  }
+  .position-lg-sticky--force {
+    position: sticky !important;
+  }
 }
 @media screen and (min-width: 1536px) {
   .position-xl-relative {
@@ -54721,6 +54758,12 @@
   .position-xl-fixed--force {
     position: fixed !important;
   }
+  .position-xl-sticky {
+    position: sticky;
+  }
+  .position-xl-sticky--force {
+    position: sticky !important;
+  }
 }
 .d-none {
   display: none;
@@ -69734,6 +69777,56 @@
   border: none !important;
 }
+.border-1,
+.b-1 {
+  border: var(--matcha-border-hairline, 1px) solid;
+}
+.border-1--force,
+.b-1--force {
+  border: var(--matcha-border-hairline, 1px) solid !important;
+}
+.border-bottom-1,
+.bb-1 {
+  border-bottom: var(--matcha-border-hairline, 1px) solid;
+}
+.border-bottom-1--force,
+.bb-1--force {
+  border-bottom: var(--matcha-border-hairline, 1px) solid !important;
+}
+.border-top-1,
+.bt-1 {
+  border-top: var(--matcha-border-hairline, 1px) solid;
+}
+.border-top-1--force,
+.bt-1--force {
+  border-top: var(--matcha-border-hairline, 1px) solid !important;
+}
+.border-left-1,
+.bl-1 {
+  border-left: var(--matcha-border-hairline, 1px) solid;
+}
+.border-left-1--force,
+.bl-1--force {
+  border-left: var(--matcha-border-hairline, 1px) solid !important;
+}
+.border-right-1,
+.br-1 {
+  border-right: var(--matcha-border-hairline, 1px) solid;
+}
+.border-right-1--force,
+.br-1--force {
+  border-right: var(--matcha-border-hairline, 1px) solid !important;
+}
 @media screen and (max-width: 639px) {
   .border-xs-0,
   .b-xs-0 {
@@ -69923,6 +70016,46 @@
   .border-xs-none--force {
     border: none !important;
   }
+  .border-xs-1,
+  .b-xs-1 {
+    border: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-xs-1--force,
+  .b-xs-1--force {
+    border: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-bottom-xs-1,
+  .bb-xs-1 {
+    border-bottom: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-bottom-xs-1--force,
+  .bb-xs-1--force {
+    border-bottom: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-top-xs-1,
+  .bt-xs-1 {
+    border-top: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-top-xs-1--force,
+  .bt-xs-1--force {
+    border-top: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-left-xs-1,
+  .bl-xs-1 {
+    border-left: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-left-xs-1--force,
+  .bl-xs-1--force {
+    border-left: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-right-xs-1,
+  .br-xs-1 {
+    border-right: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-right-xs-1--force,
+  .br-xs-1--force {
+    border-right: var(--matcha-border-hairline, 1px) solid !important;
+  }
 }
 @media screen and (min-width: 640px) {
   .border-sm-0,
@@ -70113,6 +70246,46 @@
   .border-sm-none--force {
     border: none !important;
   }
+  .border-sm-1,
+  .b-sm-1 {
+    border: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-sm-1--force,
+  .b-sm-1--force {
+    border: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-bottom-sm-1,
+  .bb-sm-1 {
+    border-bottom: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-bottom-sm-1--force,
+  .bb-sm-1--force {
+    border-bottom: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-top-sm-1,
+  .bt-sm-1 {
+    border-top: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-top-sm-1--force,
+  .bt-sm-1--force {
+    border-top: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-left-sm-1,
+  .bl-sm-1 {
+    border-left: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-left-sm-1--force,
+  .bl-sm-1--force {
+    border-left: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-right-sm-1,
+  .br-sm-1 {
+    border-right: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-right-sm-1--force,
+  .br-sm-1--force {
+    border-right: var(--matcha-border-hairline, 1px) solid !important;
+  }
 }
 @media screen and (min-width: 1024px) {
   .border-md-0,
@@ -70303,6 +70476,46 @@
   .border-md-none--force {
     border: none !important;
   }
+  .border-md-1,
+  .b-md-1 {
+    border: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-md-1--force,
+  .b-md-1--force {
+    border: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-bottom-md-1,
+  .bb-md-1 {
+    border-bottom: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-bottom-md-1--force,
+  .bb-md-1--force {
+    border-bottom: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-top-md-1,
+  .bt-md-1 {
+    border-top: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-top-md-1--force,
+  .bt-md-1--force {
+    border-top: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-left-md-1,
+  .bl-md-1 {
+    border-left: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-left-md-1--force,
+  .bl-md-1--force {
+    border-left: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-right-md-1,
+  .br-md-1 {
+    border-right: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-right-md-1--force,
+  .br-md-1--force {
+    border-right: var(--matcha-border-hairline, 1px) solid !important;
+  }
 }
 @media screen and (min-width: 1280px) {
   .border-lg-0,
@@ -70493,6 +70706,46 @@
   .border-lg-none--force {
     border: none !important;
   }
+  .border-lg-1,
+  .b-lg-1 {
+    border: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-lg-1--force,
+  .b-lg-1--force {
+    border: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-bottom-lg-1,
+  .bb-lg-1 {
+    border-bottom: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-bottom-lg-1--force,
+  .bb-lg-1--force {
+    border-bottom: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-top-lg-1,
+  .bt-lg-1 {
+    border-top: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-top-lg-1--force,
+  .bt-lg-1--force {
+    border-top: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-left-lg-1,
+  .bl-lg-1 {
+    border-left: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-left-lg-1--force,
+  .bl-lg-1--force {
+    border-left: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-right-lg-1,
+  .br-lg-1 {
+    border-right: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-right-lg-1--force,
+  .br-lg-1--force {
+    border-right: var(--matcha-border-hairline, 1px) solid !important;
+  }
 }
 @media screen and (min-width: 1536px) {
   .border-xl-0,
@@ -70683,6 +70936,46 @@
   .border-xl-none--force {
     border: none !important;
   }
+  .border-xl-1,
+  .b-xl-1 {
+    border: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-xl-1--force,
+  .b-xl-1--force {
+    border: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-bottom-xl-1,
+  .bb-xl-1 {
+    border-bottom: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-bottom-xl-1--force,
+  .bb-xl-1--force {
+    border-bottom: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-top-xl-1,
+  .bt-xl-1 {
+    border-top: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-top-xl-1--force,
+  .bt-xl-1--force {
+    border-top: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-left-xl-1,
+  .bl-xl-1 {
+    border-left: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-left-xl-1--force,
+  .bl-xl-1--force {
+    border-left: var(--matcha-border-hairline, 1px) solid !important;
+  }
+  .border-right-xl-1,
+  .br-xl-1 {
+    border-right: var(--matcha-border-hairline, 1px) solid;
+  }
+  .border-right-xl-1--force,
+  .br-xl-1--force {
+    border-right: var(--matcha-border-hairline, 1px) solid !important;
+  }
 }
 .border-hairline,
 .b-hairline {