matcha-theme 18.1.49 → 18.1.50

package/abstracts/_colors.scss

@@ -47,24 +47,6 @@ $index: 0;
         }
     }
 }
-// @mixin _generate-classes($prefix, $color-map, $saturation) {
-//     // .primary-500
-//     // .primary-600-bg
-//     // .primary-700-fg
-//     $background: map-get($color-map, $saturation);
-//     $contrast: map-get($color-map, #{$saturation}-contrast);
-
-//     .#{$prefix}-#{$saturation} {
-//         background: $background;
-//         color: $contrast;
-//     }
-//     .#{$prefix}-#{$saturation}-bg {
-//         background: $background;
-//     }
-//     .#{$prefix}-#{$saturation}-fg {
-//         color: $background;
-//     }
-// }
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Static color classes generator
@@ -101,18 +83,6 @@ $index: 0;
             color: $color !important;
         }
     }
-
-    // #{$colorSelector}-border,
-    // #{$colorSelector}-border-top,
-    // #{$colorSelector}-border-right,
-    // #{$colorSelector}-border-bottom,
-    // #{$colorSelector}-border-left {
-    //     border-color: $color !important;
-    // }
-
-    // #{$colorSelector}-fill {
-    //     fill: $color !important;
-    // }
 }
 
 @mixin colors-classes-static($theme) {
@@ -152,28 +122,6 @@ $index: 0;
                     );
                 }
             }
-            // Run the generator one more time for default values (500)
-            // if we are not working with primary, accent or warn palettes
-            // @if ($saturation == 500) {
-            //     // Generate color classes
-            //     @include _generate-static-color-classes($paletteName, $color, $contrast, "");
-
-            //     // Add color to the correct list depending on the contrasting color
-
-            //     // If the contrast color is dark
-            //     @if (rgba(black, 1) ==rgba($contrast, 1)) {
-            //         $dark-contrasting-classes: append($dark-contrasting-classes, unquote(".#{$paletteName}"), "comma");
-            //     }
-
-            //     // if the contrast color is light
-            //     @else {
-            //         $light-contrasting-classes: append(
-            //             $light-contrasting-classes,
-            //             unquote(".#{$paletteName}"),
-            //             "comma"
-            //         );
-            //     }
-            // }
         }
     }
 

package/abstracts/{_mixins.scss → _media-breakpoint.scss}

@@ -1,7 +1,16 @@
 // -------------------------------------------------------------------------------------------------------------------
 // @ Theme mixins
 // --------------------------------------------------------------------------------------------------------------------
-// for a full list of available breakpoints, see the $breakpoints map in the /tokens/_breakpoints.scss file
+/*
+    Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
+    criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
+    tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
+
+    Exemplo de uso:
+
+
+
+*/
 @mixin media-breakpoint($breakpointName) {
     $mediaQuery: map-get($breakpoints, $breakpointName);
     @if ($mediaQuery == null) {

package/components/matcha-header.scss

@@ -34,7 +34,7 @@ How to use
         }
     }
 
-    @media (min-width: 1024px) {
+    @include media-breakpoint('gt-sm') {
         .matcha-header {
 
             // matcha-header__content
@@ -61,10 +61,10 @@ How to use
     }
 
     // X-Large devices (big desktops, 1440px and up < 1920)
-    @media (min-width: 1440px) {}
+    @include media-breakpoint('gt-md') {}
 
     // XX-Large devices (larger desktops, 1920px and up)
-    @media (min-width: 1920px) {}
+    @include media-breakpoint('gt-lg') {}
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -251,10 +251,10 @@ How to use
 }
 
 // Medium devices (landscapes and tablets, 600px and up < 1024px )
-@media (min-width: 600px) {}
+@include media-breakpoint('gt-xs') {}
 
 // Large devices (tablets and small monitors, 1024px and up < 1440px)
-@media (min-width: 1024px) {
+@include media-breakpoint('gt-xs') {
     .matcha-header {
         &__content {
             padding: 16px;
@@ -321,7 +321,7 @@ How to use
 }
 
 // X-Large devices (big desktops, 1440px and up < 1920)
-@media (min-width: 1440px) {}
+@include media-breakpoint('gt-md') {}
 
 // XX-Large devices (larger desktops, 1920px and up)
-@media (min-width: 1920px) {}
+@include media-breakpoint('gt-lg') {}

package/main.scss

@@ -1,6 +1,6 @@
 // TOKENS
-@import "./tokens/animations";
-@import "./tokens/breakpoints";
+@import "./tokens/animations-tokens";
+@import "./tokens/breakpoints-tokens";
 @import "./tokens/color-tokens";
 @import "./tokens/elevation-tokens";
 @import "./tokens/spacing-tokens";
@@ -12,7 +12,7 @@
 // MIXINS
 @import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
 @import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
-@import "./abstracts/mixins"; // media-breakpoint()
+@import "./abstracts/media-breakpoint"; // media-breakpoint()
 
 // TYPOGRAPHY
 @import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "18.1.49",
+    "version": "18.1.50",
     "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {

package/tokens/{_breakpoints.scss → _breakpoints-tokens.scss}

@@ -1,16 +1,16 @@
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
     xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 1359px)',
-    md: 'screen and (min-width: 1360px) and (max-width: 1439px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
+    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
     lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
     xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
     lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 1359px)',
+    lt-md: 'screen and (max-width: 1023px)',
     lt-lg: 'screen and (max-width: 1439px)',
     lt-xl: 'screen and (max-width: 1919px)',
     gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 1360px)',
+    gt-sm: 'screen and (min-width: 1024px)',
     gt-md: 'screen and (min-width: 1440px)',
     gt-lg: 'screen and (min-width: 1920px)'
 ) !default;