matcha-theme 18.1.49 → 18.2.0

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/components/matcha-tooltip.scss

@@ -0,0 +1,107 @@
+.matcha-tooltip-content {
+    position: absolute;
+    z-index: 9999;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    line-height: 20px;
+    width: auto;
+    max-width: 500px;
+    text-overflow: ellipsis;
+    display: inline-flex;
+    gap:8px;
+    align-items: center;
+    justify-content: center;
+
+    &:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 6px 8px 0 8px;
+        bottom: -4px;
+        left: 50%;
+        border-radius: 0px;
+        transform: translateX(-50%);
+    }
+}
+
+// Estilo para o botão de fechar
+.matcha-tooltip-close {
+    display: flex;
+    pointer-events: auto; // Permite que o botão receba cliques
+    cursor: pointer;
+
+    &::before {
+    content: "\e92a";
+    font-family: 'MatchaIcons';
+    font-size: 16px;
+    line-height: 16px;
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    }
+}
+
+.matcha-tooltip-content_below::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0px 8px 6px 8px;
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.matcha-tooltip-content_left::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 8px 0 8px 6px;
+    top: 50%;
+    right: -4px;
+    transform: translateY(-50%);
+}
+
+.matcha-tooltip-content_right::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 8px 6px 8px 0;
+    top: 50%;
+    left: -4px;
+    transform: translateY(-50%);
+}
+
+@mixin matcha-tooltip-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .matcha-tooltip-content {
+        background-color: map-get($foreground, text);
+        color: map-get($foreground, text-inverse);
+        &:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
+            border-color: map-get($foreground, text) transparent transparent transparent;
+        }
+    }
+
+    .matcha-tooltip-content_below::before {
+        border-color: transparent transparent map-get($foreground, text) transparent;
+    }
+
+    .matcha-tooltip-content_left::after {
+        border-color: transparent transparent transparent map-get($foreground, text);
+    }
+
+    .matcha-tooltip-content_right::after {
+        border-color: transparent map-get($foreground, text) transparent transparent;
+    }
+}

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()
@@ -33,6 +33,7 @@
 @import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
 @import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
 @import "./components/matcha-table.scss"; // matcha-table-theme($theme)
+@import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
 
 // VENDORS
 @import "./vendors/angular-editor.scss";
@@ -125,6 +126,7 @@
     @include matcha-table-theme($theme);
 
     @include matcha-button-theme($theme);
+    @include matcha-tooltip-theme($theme);
     @include matcha-header-theme($theme);
     @include matcha-menu-theme($theme);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "18.1.49",
+    "version": "18.2.0",
     "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;