matcha-theme 1.0.10 → 1.0.12

package/abstracts/_functions.scss

@@ -179,11 +179,11 @@
     $display-1: matcha-typography-level(34px, 40px, 400),
     $headline: matcha-typography-level(24px, 32px, 400),
     $title: matcha-typography-level(20px, 32px, 700),
-    $subheading-2: matcha-typography-level(16px, 28px, 700),
-    $subheading-1: matcha-typography-level(15px, 24px, 700),
+    $subheading-2: matcha-typography-level(16px, 28px, 900),
+    $subheading-1: matcha-typography-level(15px, 24px, 900),
     $body-2: matcha-typography-level(14px, 24px, 500),
     $body-1: matcha-typography-level(14px, 20px, 400),
-    $caption: matcha-typography-level(12px, 20px, 400),
+    $caption: matcha-typography-level(12px, 20px, 500),
     $button: matcha-typography-level(14px, 14px, 500),
     $input: matcha-typography-level(inherit, 1.125, 400)
 ) {
@@ -390,12 +390,9 @@ $base-font-size: 16px;
 
 // Function to convert pixels to rem.
 @function px-to-rem($value-in-px) {
-    @return calc($value-in-px / $base-font-size) * 1rem;
-}
-
-// Example of use of the function:
-// .example {
-//   font-size: px-to-rem(24px); // Converte 24px para rem.
-//   margin: px-to-rem(16px);    // Converte 16px para rem.
-//   padding: px-to-rem(8px);    // Converte 8px para rem.
-// }
+    @if $value-in-px != 0 {
+        @return calc($value-in-px / $base-font-size) * 1rem;
+    } @else {
+        @return $value-in-px;
+    }
+}

package/abstracts/_grid.scss

@@ -32,11 +32,19 @@
 
     @for $i from 0 through 12 {
         $size: $i * 4;
-
         .gap-#{$size} {
             column-gap: #{$size}px;
             row-gap: #{$size}px;
         }
+        @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+            @include media-breakpoint($materialBreakpoint) {
+                $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+                .gap#{$infix}-#{$size} {
+                    column-gap: #{$size}px;
+                    row-gap: #{$size}px;
+                }
+            }
+        }
     }
 
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {

package/abstracts/_typography.scss

@@ -77,8 +77,8 @@
     .h2,
     h2 {
         font-size: px-to-rem(32px);
-        font-family: matcha-font-family($config, title);
-        font-weight: matcha-font-weight($config, title);
+        font-family: matcha-font-family($config, body-2);
+        font-weight: matcha-font-weight($config, body-2);
     }
 
     .h3,
@@ -104,25 +104,9 @@
 
     .h6,
     h6 {
-        font-size: px-to-rem(14px);
-        font-family: matcha-font-family($config, title);
-        font-weight: matcha-font-weight($config, title);
-    }
-
-    .h7,
-    .subheading-2 {
         font-size: px-to-rem(12px);
-        font-family: matcha-font-family($config, title);
-        font-weight: matcha-font-weight($config, title);
-    }
-
-    .h8,
-    .subheading-1 {
-        font-size: px-to-rem(12px);
-        font-family: matcha-font-family($config, title);
-        font-weight: matcha-font-weight($config, title);
-        text-transform: uppercase;
-        letter-spacing: px-to-rem(0.8px);
+        font-family: matcha-font-family($config, subheading-2);
+        font-weight: matcha-font-weight($config, subheading-2);
     }
 
     .text-bold,