matcha-theme 1.0.11 → 1.0.13

package/abstracts/_functions.scss

@@ -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/base/_helpers.scss

@@ -721,339 +721,40 @@
 // @ Border helpers
 // -----------------------------------------------------------------------------------------------------
 // none:0 thin:2 thick:4 thicker:8
-.b-0,
-.border-0 {
-    border: 0 solid
-}
-
-.border-top-0,
-.bt-0 {
-    border-top: 0 solid
-}
-
-.border-right-0,
-.br-0 {
-    border-right: 0 solid
-}
-
-.bb-0,
-.border-bottom-0 {
-    border-bottom: 0 solid
-}
-
-.bl-0,
-.border-left-0 {
-    border-left: 0 solid
-}
-
-.border-horizontal-0,
-.bx-0 {
-    border-left: 0 solid;
-    border-right: 0 solid
-}
-
-.border-vertical-0,
-.by-0 {
-    border-top: 0 solid;
-    border-bottom: 0 solid
-}
-
-.b-1,
-.border-1 {
-    border: 1px solid
-}
-
-.border-top-1,
-.bt-1 {
-    border-top: 1px solid
-}
-
-.border-right-1,
-.br-1 {
-    border-right: 1px solid
-}
-
-.bb-1,
-.border-bottom-1 {
-    border-bottom: 1px solid
-}
-
-.bl-1,
-.border-left-1 {
-    border-left: 1px solid
-}
-
-.border-horizontal-1,
-.bx-1 {
-    border-left: 1px solid;
-    border-right: 1px solid
-}
-
-.border-vertical-1,
-.by-1 {
-    border-top: 1px solid;
-    border-bottom: 1px solid
-}
-
-.b-2,
-.border-2 {
-    border: 2px solid
-}
-
-.border-top-2,
-.bt-2 {
-    border-top: 2px solid
-}
-
-.border-right-2,
-.br-2 {
-    border-right: 2px solid
-}
-
-.bb-2,
-.border-bottom-2 {
-    border-bottom: 2px solid
-}
-
-.bl-2,
-.border-left-2 {
-    border-left: 2px solid
-}
-
-.border-horizontal-2,
-.bx-2 {
-    border-left: 2px solid;
-    border-right: 2px solid
-}
-
-.border-vertical-2,
-.by-2 {
-    border-top: 2px solid;
-    border-bottom: 2px solid
-}
-
-.b-3,
-.border-3 {
-    border: 3px solid
-}
-
-.border-top-3,
-.bt-3 {
-    border-top: 3px solid
-}
-
-.border-right-3,
-.br-3 {
-    border-right: 3px solid
-}
-
-.bb-3,
-.border-bottom-3 {
-    border-bottom: 3px solid
-}
-
-.bl-3,
-.border-left-3 {
-    border-left: 3px solid
-}
-
-.border-horizontal-3,
-.bx-3 {
-    border-left: 3px solid;
-    border-right: 3px solid
-}
-
-.border-vertical-3,
-.by-3 {
-    border-top: 3px solid;
-    border-bottom: 3px solid
-}
-
-.b-4,
-.border-4 {
-    border: 4px solid
-}
-
-.border-top-4,
-.bt-4 {
-    border-top: 4px solid
-}
-
-.border-right-4,
-.br-4 {
-    border-right: 4px solid
-}
-
-.bb-4,
-.border-bottom-4 {
-    border-bottom: 4px solid
-}
-
-.bl-4,
-.border-left-4 {
-    border-left: 4px solid
-}
-
-.border-horizontal-4,
-.bx-4 {
-    border-left: 4px solid;
-    border-right: 4px solid
-}
-
-.border-vertical-4,
-.by-4 {
-    border-top: 4px solid;
-    border-bottom: 4px solid
-}
-
-.b-5,
-.border-5 {
-    border: 5px solid
-}
-
-.border-top-5,
-.bt-5 {
-    border-top: 5px solid
-}
-
-.border-right-5,
-.br-5 {
-    border-right: 5px solid
-}
-
-.bb-5,
-.border-bottom-5 {
-    border-bottom: 5px solid
-}
-
-.bl-5,
-.border-left-5 {
-    border-left: 5px solid
-}
-
-.border-horizontal-5,
-.bx-5 {
-    border-left: 5px solid;
-    border-right: 5px solid
-}
-
-.border-vertical-5,
-.by-5 {
-    border-top: 5px solid;
-    border-bottom: 5px solid
-}
-
-.b-6,
-.border-6 {
-    border: 6px solid
-}
-
-.border-top-6,
-.bt-6 {
-    border-top: 6px solid
-}
-
-.border-right-6,
-.br-6 {
-    border-right: 6px solid
-}
-
-.bb-6,
-.border-bottom-6 {
-    border-bottom: 6px solid
-}
-
-.bl-6,
-.border-left-6 {
-    border-left: 6px solid
-}
-
-.border-horizontal-6,
-.bx-6 {
-    border-left: 6px solid;
-    border-right: 6px solid
-}
-
-.border-vertical-6,
-.by-6 {
-    border-top: 6px solid;
-    border-bottom: 6px solid
-}
-
-.b-7,
-.border-7 {
-    border: 7px solid
-}
-
-.border-top-7,
-.bt-7 {
-    border-top: 7px solid
-}
-
-.border-right-7,
-.br-7 {
-    border-right: 7px solid
-}
-
-.bb-7,
-.border-bottom-7 {
-    border-bottom: 7px solid
-}
-
-.bl-7,
-.border-left-7 {
-    border-left: 7px solid
-}
-
-.border-horizontal-7,
-.bx-7 {
-    border-left: 7px solid;
-    border-right: 7px solid
-}
-
-.border-vertical-7,
-.by-7 {
-    border-top: 7px solid;
-    border-bottom: 7px solid
-}
-
-.b-8,
-.border-8 {
-    border: 8px solid
-}
-
-.border-top-8,
-.bt-8 {
-    border-top: 8px solid
-}
-
-.border-right-8,
-.br-8 {
-    border-right: 8px solid
-}
-
-.bb-8,
-.border-bottom-8 {
-    border-bottom: 8px solid
-}
-
-.bl-8,
-.border-left-8 {
-    border-left: 8px solid
-}
-
-.border-horizontal-8,
-.bx-8 {
-    border-left: 8px solid;
-    border-right: 8px solid
-}
-
-.border-vertical-8,
-.by-8 {
-    border-top: 8px solid;
-    border-bottom: 8px solid
-}
 
+@mixin helper-border-size($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+            
+            @for $i from 0 through 4 {
+                $border-value: $i * 2;
+                $border-suffix: "-#{$border-value}";
+                // Gerar classes para todos os cantos
+                .border#{$infix}#{$border-suffix} {
+                    border: #{$border-value}px solid!important;
+                }
+
+                @if($border-value != 0){
+                    @each $direction, $abbrev in (bottom:bb, top:bt, left:bl, right:br) {
+                        .border-#{$direction}#{$infix}#{$border-suffix},
+                        .#{$abbrev}#{$infix}#{$border-suffix}{
+                            border-#{$direction}:
+                            if($direction == "bottom",#{$border-value}px solid,
+                            if($direction == "top", #{$border-value}px solid,
+                            if($direction == "left", #{$border-value}px solid,
+                                                #{$border-value}px solid
+                                            )
+                                        )
+                                    ) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@include helper-border-size($helper-breakpoints);
 .border-none {
     border: none !important
 }
@@ -1061,177 +762,47 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Border Radius helpers
 // -----------------------------------------------------------------------------------------------------
-.border-radius-0,
-.border-radius-b-0,
-.border-radius-l-0,
-.border-radius-r-0,
-.border-radius-t-0 {
-    border-radius: 0 !important
-}
-
-.border-radius-1 {
-    border-radius: 1px !important
-}
-
-.border-radius-b-1 {
-    border-radius: 0 0 1px 1px !important
-}
-
-.border-radius-t-1 {
-    border-radius: 1px 1px 0 0 !important
-}
-
-.border-radius-l-1 {
-    border-radius: 1px 0 0 1px !important
-}
-
-.border-radius-r-1 {
-    border-radius: 0 1px 1px 0 !important
-}
-
-.border-radius-2 {
-    border-radius: 2px !important
-}
-
-.border-radius-b-2 {
-    border-radius: 0 0 2px 2px !important
-}
-
-.border-radius-t-2 {
-    border-radius: 2px 2px 0 0 !important
-}
-
-.border-radius-l-2 {
-    border-radius: 2px 0 0 2px !important
-}
-
-.border-radius-r-2 {
-    border-radius: 0 2px 2px 0 !important
-}
-
-.border-radius-3 {
-    border-radius: 3px !important
-}
-
-.border-radius-b-3 {
-    border-radius: 0 0 3px 3px !important
-}
-
-.border-radius-t-3 {
-    border-radius: 3px 3px 0 0 !important
-}
-
-.border-radius-l-3 {
-    border-radius: 3px 0 0 3px !important
-}
-
-.border-radius-r-3 {
-    border-radius: 0 3px 3px 0 !important
-}
-
-.border-radius-4 {
-    border-radius: 4px !important
-}
-
-.border-radius-b-4 {
-    border-radius: 0 0 4px 4px !important
-}
-
-.border-radius-t-4 {
-    border-radius: 4px 4px 0 0 !important
-}
-
-.border-radius-l-4 {
-    border-radius: 4px 0 0 4px !important
-}
-
-.border-radius-r-4 {
-    border-radius: 0 4px 4px 0 !important
-}
-
-.border-radius-5 {
-    border-radius: 5px !important
-}
-
-.border-radius-b-5 {
-    border-radius: 0 0 5px 5px !important
-}
-
-.border-radius-t-5 {
-    border-radius: 5px 5px 0 0 !important
-}
-
-.border-radius-l-5 {
-    border-radius: 5px 0 0 5px !important
-}
-
-.border-radius-r-5 {
-    border-radius: 0 5px 5px 0 !important
-}
-
-.border-radius-6 {
-    border-radius: 6px !important
-}
-
-.border-radius-b-6 {
-    border-radius: 0 0 6px 6px !important
-}
-
-.border-radius-t-6 {
-    border-radius: 6px 6px 0 0 !important
-}
-
-.border-radius-l-6 {
-    border-radius: 6px 0 0 6px !important
-}
+@mixin helper-border-radius($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+            
+            @for $i from 0 through 8 {
+                $radius-value: $i * 2;
+                $radius-suffix: "-#{$radius-value}";
+                //Exemplo de classe gerada: .border-radius-md-4 ou .border-radius-4
+                .border-radius#{$infix}#{$radius-suffix} {
+                    border-radius: #{$radius-value}px !important;
+                }
+
+                @if($radius-value != 0){
+                    @each $direction, $abbrev in (bottom:b, top:t, left:l, right:r) {
+                        //Exemplo de classe gerada: .border-radius-bottom-md-4 e .border-radius-b-md-4 ou .border-radius-bottom-4 e .border-radius-b-4
+                        .border-radius-#{$direction}#{$infix}#{$radius-suffix},
+                        .border-radius-#{$abbrev}#{$infix}#{$radius-suffix}{
+                            border-radius:
+                            if($direction == "bottom", 0 0 #{$radius-value}px #{$radius-value}px,
+                            if($direction == "top", #{$radius-value}px #{$radius-value}px 0 0,
+                            if($direction == "left", #{$radius-value}px 0 0 #{$radius-value}px,
+                                                0 #{$radius-value}px #{$radius-value}px 0
+                                            )
+                                        )
+                                    )!important;
+                        }
+                    }
+                }
+            }
+            .border-radius#{$infix}-circle,
+            .border-radius#{$infix}-full,
+            .border-radius#{$infix}-round {
+                border-radius: 999px !important;
+            }
+        }
+    }
+}
+@include helper-border-radius($helper-breakpoints);
 
-.border-radius-r-6 {
-    border-radius: 0 6px 6px 0 !important
-}
-
-.border-radius-7 {
-    border-radius: 7px !important
-}
-
-.border-radius-b-7 {
-    border-radius: 0 0 7px 7px !important
-}
-
-.border-radius-t-7 {
-    border-radius: 7px 7px 0 0 !important
-}
-
-.border-radius-l-7 {
-    border-radius: 7px 0 0 7px !important
-}
 
-.border-radius-r-7 {
-    border-radius: 0 7px 7px 0 !important
-}
-
-.border-radius-8 {
-    border-radius: 8px !important
-}
-
-.border-radius-b-8 {
-    border-radius: 0 0 8px 8px !important
-}
-
-.border-radius-t-8 {
-    border-radius: 8px 8px 0 0 !important
-}
-
-.border-radius-l-8 {
-    border-radius: 8px 0 0 8px !important
-}
-
-.border-radius-r-8 {
-    border-radius: 0 8px 8px 0 !important
-}
-
-.border-radius-circle {
-    border-radius: 999px !important
-}
 
 // -----------------------------------------------------------------------------------------------------
 // @ Overflow helpers
@@ -2378,437 +1949,84 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Font Weight
 // -----------------------------------------------------------------------------------------------------
-.font-weight-100,
-.fw-100 {
-    font-weight: 100
-}
-
-.font-weight-200,
-.fw-200 {
-    font-weight: 200
-}
-
-.font-weight-300,
-.fw-300 {
-    font-weight: 300
-}
-
-.font-weight-400,
-.fw-400 {
-    font-weight: 400
-}
-
-.font-weight-500,
-.fw-500 {
-    font-weight: 500
-}
-
-.font-weight-600,
-.fw-600 {
-    font-weight: 600
-}
-
-.font-weight-700,
-.fw-700 {
-    font-weight: 700
-}
-
-.font-weight-800,
-.fw-800 {
-    font-weight: 800
-}
-
-.font-weight-900,
-.fw-900 {
-    font-weight: 900
-}
+@mixin helper-font-weight($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+    
+            @for $index from 1 through 9 {
+                $weight: $index * 100;
+                .font-weight#{$infix}-#{$weight},
+                .fw#{$infix}-#{$weight} {
+                    font-weight: $weight !important;
+                }
+            }
+        }
+    }
+}
+@include helper-font-weight($helper-breakpoints);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Font Size
 // -----------------------------------------------------------------------------------------------------
-.font-size-2,
-.fs-2 {
-    font-size: 2px !important
-}
-
-.font-size-4,
-.fs-4 {
-    font-size: 4px !important
-}
-
-.font-size-6,
-.fs-6 {
-    font-size: 6px !important
-}
-
-.font-size-8,
-.fs-8 {
-    font-size: 8px !important
-}
-
-.font-size-10,
-.fs-10 {
-    font-size: 10px !important
-}
-
-.font-size-12,
-.fs-12 {
-    font-size: 12px !important
-}
-
-.font-size-14,
-.fs-14 {
-    font-size: 14px !important
-}
-
-.font-size-16,
-.fs-16 {
-    font-size: 16px !important
-}
-
-.font-size-18,
-.fs-18 {
-    font-size: 18px !important
-}
-
-.font-size-20,
-.fs-20 {
-    font-size: 20px !important
-}
-
-.font-size-22,
-.fs-22 {
-    font-size: 22px !important
-}
-
-.font-size-24,
-.fs-24 {
-    font-size: 24px !important
-}
-
-.font-size-26,
-.fs-26 {
-    font-size: 26px !important
-}
-
-.font-size-28,
-.fs-28 {
-    font-size: 28px !important
-}
-
-.font-size-30,
-.fs-30 {
-    font-size: 30px !important
-}
-
-.font-size-32,
-.fs-32 {
-    font-size: 32px !important
-}
-
-.font-size-34,
-.fs-34 {
-    font-size: 34px !important
-}
-
-.font-size-36,
-.fs-36 {
-    font-size: 36px !important
-}
-
-.font-size-38,
-.fs-38 {
-    font-size: 38px !important
-}
-
-.font-size-40,
-.fs-40 {
-    font-size: 40px !important
-}
-
-.font-size-42,
-.fs-42 {
-    font-size: 42px !important
-}
-
-.font-size-44,
-.fs-44 {
-    font-size: 44px !important
-}
-
-.font-size-46,
-.fs-46 {
-    font-size: 46px !important
-}
-
-.font-size-48,
-.fs-48 {
-    font-size: 48px !important
-}
-
-.font-size-50,
-.fs-50 {
-    font-size: 50px !important
-}
-
-.font-size-52,
-.fs-52 {
-    font-size: 52px !important
-}
-
-.font-size-54,
-.fs-54 {
-    font-size: 54px !important
-}
-
-.font-size-56,
-.fs-56 {
-    font-size: 56px !important
-}
-
-.font-size-58,
-.fs-58 {
-    font-size: 58px !important
-}
-
-.font-size-60,
-.fs-60 {
-    font-size: 60px !important
-}
-
-.font-size-62,
-.fs-62 {
-    font-size: 62px !important
-}
-
-.font-size-64,
-.fs-64 {
-    font-size: 64px !important
-}
-
-.font-size-66,
-.fs-66 {
-    font-size: 66px !important
-}
-
-.font-size-68,
-.fs-68 {
-    font-size: 68px !important
-}
-
-.font-size-70,
-.fs-70 {
-    font-size: 70px !important
-}
-
-.font-size-72,
-.fs-72 {
-    font-size: 72px !important
-}
+@mixin helper-font-size($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+    
+            $index: 0;
+            @while $index <= 18 {
+                $size: $index * 4;
+                .font-size#{$infix}-#{$size},
+                .fs#{$infix}-#{$size} {
+                    font-size: #{$size}px !important;
+                }
+                $index: $index + 1;
+            }
+        }
+    }
+}
+@include helper-font-size($helper-breakpoints);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Line Height
 // -----------------------------------------------------------------------------------------------------
-.lh-2,
-.line-height-2 {
-    line-height: 2px !important
-}
-
-.lh-4,
-.line-height-4 {
-    line-height: 4px !important
-}
-
-.lh-6,
-.line-height-6 {
-    line-height: 6px !important
-}
-
-.lh-8,
-.line-height-8 {
-    line-height: 8px !important
-}
-
-.lh-10,
-.line-height-10 {
-    line-height: 10px !important
-}
-
-.lh-12,
-.line-height-12 {
-    line-height: 12px !important
-}
-
-.lh-14,
-.line-height-14 {
-    line-height: 14px !important
-}
-
-.lh-16,
-.line-height-16 {
-    line-height: 16px !important
-}
-
-.lh-18,
-.line-height-18 {
-    line-height: 18px !important
-}
-
-.lh-20,
-.line-height-20 {
-    line-height: 20px !important
-}
-
-.lh-22,
-.line-height-22 {
-    line-height: 22px !important
-}
-
-.lh-24,
-.line-height-24 {
-    line-height: 24px !important
-}
-
-.lh-26,
-.line-height-26 {
-    line-height: 26px !important
-}
-
-.lh-28,
-.line-height-28 {
-    line-height: 28px !important
-}
-
-.lh-30,
-.line-height-30 {
-    line-height: 30px !important
-}
-
-.lh-32,
-.line-height-32 {
-    line-height: 32px !important
-}
-
-.lh-34,
-.line-height-34 {
-    line-height: 34px !important
-}
-
-.lh-36,
-.line-height-36 {
-    line-height: 36px !important
-}
-
-.lh-38,
-.line-height-38 {
-    line-height: 38px !important
-}
-
-.lh-40,
-.line-height-40 {
-    line-height: 40px !important
-}
-
-.lh-42,
-.line-height-42 {
-    line-height: 42px !important
-}
-
-.lh-44,
-.line-height-44 {
-    line-height: 44px !important
-}
-
-.lh-46,
-.line-height-46 {
-    line-height: 46px !important
-}
-
-.lh-48,
-.line-height-48 {
-    line-height: 48px !important
-}
-
-.lh-50,
-.line-height-50 {
-    line-height: 50px !important
-}
-
-.lh-52,
-.line-height-52 {
-    line-height: 52px !important
-}
-
-.lh-54,
-.line-height-54 {
-    line-height: 54px !important
-}
-
-.lh-56,
-.line-height-56 {
-    line-height: 56px !important
-}
-
-.lh-58,
-.line-height-58 {
-    line-height: 58px !important
-}
-
-.lh-60,
-.line-height-60 {
-    line-height: 60px !important
-}
-
-.lh-62,
-.line-height-62 {
-    line-height: 62px !important
-}
-
-.lh-64,
-.line-height-64 {
-    line-height: 64px !important
-}
-
-.lh-66,
-.line-height-66 {
-    line-height: 66px !important
-}
-
-.lh-68,
-.line-height-68 {
-    line-height: 68px !important
-}
-
-.lh-70,
-.line-height-70 {
-    line-height: 70px !important
-}
-
-.lh-72,
-.line-height-72 {
-    line-height: 72px !important
-}
-
-// .line-height-1{line-height:1}
-// .line-height-1\.25{line-height:1.25}
-// .line-height-1\.5{line-height:1.5}
-// .line-height-1\.75{line-height:1.75}
+@mixin helper-line-height($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+    
+            $index: 0;
+            @while $index <= 36 {
+                $height: $index * 2;
+                .line-height#{$infix}-#{$height},
+                .lh#{$infix}-#{$height} {
+                    line-height: #{$height}px !important;
+                }
+                $index: $index + 1;
+            }
+        }
+    }
+}
+@include helper-line-height($helper-breakpoints);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Letter spacing helpers
 // -----------------------------------------------------------------------------------------------------
+
 .letter-spacing-condensed {
-    letter-spacing: -.08em
+    letter-spacing: -.08em !important;
 }
 
 .letter-spacing-normal {
-    letter-spacing: normal
+    letter-spacing: normal !important;
 }
 
 .letter-spacing-relaxed {
-    letter-spacing: .08em
+    letter-spacing: .08em !important;
 }
 
+
 // -----------------------------------------------------------------------------------------------------
 // @ Cursor helpers
 // -----------------------------------------------------------------------------------------------------
@@ -2851,7 +2069,9 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Clear Shadows
 // -----------------------------------------------------------------------------------------------------
-.flatten {
+.flatten,
+.no-shadow,
+.shadow-none {
     box-shadow: none !important;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "1.0.11",
+    "version": "1.0.13",
     "description": "styles for matcha-design-system",
     "main": "main.scss",
     "scripts": {