matcha-theme 20.7.0 → 20.12.0

package/base/_reset.scss

@@ -28,6 +28,9 @@ How to use
         color: map-get($accent, default);
     }
 
+    pre > code{
+        color: getBlue($theme);
+    }
     code {
         &:not(.highlight) {
             background-color: map-get($background, card);

package/components/matcha-autocomplete.scss

@@ -0,0 +1,20 @@
+@mixin matcha-autocomplete-theme($theme) {
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+
+    .matcha-autocomplete-panel {
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+        z-index: 1;
+        border-radius: 8px;
+        background: map-get($background, surface);
+        max-height: 280px;
+        overflow: auto;
+        min-width: 160px;
+        display: flex;
+        flex-direction: column;
+    }
+}

package/components/matcha-button-toggle.scss

@@ -2,7 +2,7 @@
     &:not([inactivetype]),
     &[inactivetype="solid"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group{
                     button[matcha-button],
                     a[matcha-button]{
@@ -36,7 +36,7 @@
 @mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
     &[inactivetype="basic"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group{
                     button[matcha-button],
                     a[matcha-button]{
@@ -72,7 +72,7 @@
         //disabled false
         &:not([disabled="true"]){
             @each $colorName, $colorFn in $color-functions {
-                &[inactivecolor="#{$colorName}"]{
+                &[inactivecolor="#{'' + $colorName}"]{
                     .button-group{
                         button[matcha-button],
                         a[matcha-button]{
@@ -110,7 +110,7 @@
 @mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
     &[inactivetype="alpha"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group{
                     button[matcha-button],
                     a[matcha-button]{
@@ -146,7 +146,7 @@
 
     &[inactivetype="link"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group{
                     button[matcha-button],
                     a[matcha-button]{

package/components/matcha-buttons.scss

@@ -255,24 +255,24 @@ a[matcha-button] {
         }
 
         @each $colorName, $colorFn in $color-functions {
-            &[color="#{$colorName}"][outline]:not([outline="false"]) .ripple,
-            &[color="#{$colorName}"][basic]:not([basic="false"]) .ripple {
+            &[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
+            &[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
                 background: call(#{$colorFn}Alpha, $theme)
             }
-            &[color="#{$colorName}"][alpha]:not([alpha="false"]){
+            &[color="#{'' + $colorName}"][alpha]:not([alpha="false"]){
                 background: call(#{$colorFn}Alpha, $theme);
                 color: call(#{$colorFn}, $theme);
             }
-            &[color="#{$colorName}"][outline]:not([outline="false"]),
-            &[color="#{$colorName}"][link]:not([link="false"]),
-            &[color="#{$colorName}"][basic]:not([basic="false"]) {
+            &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
+            &[color="#{'' + $colorName}"][link]:not([link="false"]),
+            &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
                 color: call(#{$colorFn}, $theme);
             }
-            &[color="#{$colorName}"]{
+            &[color="#{'' + $colorName}"]{
                 background: call(#{$colorFn}, $theme);
                 color: call(#{$colorFn}Contrast, $theme);
             }
-            &[color="#{$colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
+            &[color="#{'' + $colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
 
             &[disabled],
             &[disabled]:not([disabled="false"]),

package/components/matcha-cards.scss

@@ -29,17 +29,17 @@
     .matcha-card,
     .matcha-card-flat {
         @each $colorName, $colorFn in $color-functions {
-            &[color="#{$colorName}"][tint]:not([tint="false"]) {
+            &[color="#{'' + $colorName}"][tint]:not([tint="false"]) {
                 background: call(#{$colorFn}Alpha, $theme);
                 color: call(#{$colorFn}, $theme);
             }
-            &[color="#{$colorName}"][outline]:not([outline="false"]),
-            &[color="#{$colorName}"][link]:not([link="false"]),
-            &[color="#{$colorName}"][basic]:not([basic="false"]) {
+            &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
+            &[color="#{'' + $colorName}"][link]:not([link="false"]),
+            &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
                 color: call(#{$colorFn}, $theme);
             }
 
-            &[color="#{$colorName}"] {
+            &[color="#{'' + $colorName}"] {
                 background: call(#{$colorFn}, $theme);
                 color: call(#{$colorFn}Contrast, $theme);
                 &[alpha]:not([alpha="false"]) {

package/components/matcha-drawer.scss

@@ -0,0 +1,157 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Matcha Drawer Component Styles
+// -------------------------------------------------------------------------------------------------------------------
+
+@mixin matcha-drawer-theme($theme) {
+  // Variáveis do tema
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  // ===== HOST STYLES =====
+  matcha-drawer {
+    display: block;
+    transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    z-index: 10;
+    position: relative;
+  }
+
+  // ===== DRAWER CONTAINER WRAPPER =====
+  .matcha-drawer-container-wrapper {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  // ===== DRAWER CONTENT WRAPPER =====
+  .matcha-drawer-content-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  // ===== BACKDROP =====
+  .matcha-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(getForeground($theme), 0.3);
+    backdrop-filter: blur(6px);
+    z-index: 9;
+    cursor: pointer;
+  }
+
+  // ===== DRAWER CONTAINER =====
+  .matcha-drawer-container {
+    display: flex;
+    height: 100%;
+    background: getBackground($theme);
+    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+
+    // Posicionamento
+    &.matcha-drawer-left {
+      left: 0;
+    }
+
+    &.matcha-drawer-right {
+      right: 0;
+    }
+
+    // Modos de operação
+    &.matcha-drawer-overlay-mode {
+      position: fixed;
+      top: 0;
+      z-index: 10;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+      border-radius: 0 8px 8px 0;
+      width: 320px !important; // Largura fixa para overlay
+    }
+
+    &.matcha-drawer-push-mode {
+      position: relative;
+      border-right: 1px solid getDisabled($theme);
+      z-index: 1;
+    }
+
+  }
+
+  // ===== DRAWER CONTENT =====
+  .matcha-drawer-content {
+    display: flex;
+    flex-direction: column;
+    background-color: getBackground($theme);
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  // ===== DRAWER HEADER =====
+  .matcha-drawer-header {
+    border-bottom: 1px solid getDisabled($theme);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // ===== DRAWER MAIN CONTENT =====
+  .matcha-drawer-main-content {
+    flex: 1;
+    padding: 16px;
+  }
+
+  // ===== DRAWER FOOTER =====
+  .matcha-drawer-footer {
+    padding: 16px;
+    border-top: 1px solid getDisabled($theme);
+  }
+
+  // ===== DRAWER CLOSE BUTTON =====
+  .matcha-drawer-close-button {
+    padding: 8px;
+    border-radius: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: getForeground($theme);
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(getSurface($theme), 0.04);
+    }
+  }
+
+  // ===== HOVER EFFECTS =====
+  .sub-sidebar-item:hover:not(.disabled) {
+    transform: translateY(-1px);
+    background-color: map-get($accent, default);
+  }
+
+  // ===== RESPONSIVO =====
+  @media (max-width: 1023px) {
+    .matcha-drawer-container {
+      width: 100% !important;
+    }
+  }
+
+  // ===== CENTRALIZAÇÃO EM TELAS GRANDES =====
+  @media (min-width: 1920px) {
+    .matcha-drawer-container {
+      transform: translateX(calc(50vw - 960px));
+    }
+  }
+
+  // ===== ACESSIBILIDADE =====
+  .matcha-drawer-container:focus {
+    outline: 2px solid getAccent($theme);
+    outline-offset: 2px;
+  }
+}

package/components/matcha-form-field.scss

@@ -12,6 +12,7 @@
         textarea {
             min-height: px-to-rem(20px); /* Mantém a altura dos inputs de texto */
             line-height: px-to-rem($line-height);
+            padding: 0;
         }
     }
 }
@@ -85,7 +86,7 @@
         input[type="time"]:focus,
         textarea:focus {
             outline: none;
-        }    
+        }
     }
 
     matcha-form-field{

package/components/matcha-option.scss

@@ -0,0 +1,22 @@
+@mixin matcha-option-theme($theme) {
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .matcha-option {
+        padding: 8px 12px;
+        cursor: pointer;
+        background: getSurface($theme);
+    }
+
+    .matcha-option[aria-selected="true"] {
+        background: rgba(0, 0, 0, 0.08);
+    }
+
+    .matcha-option[disabled] {
+        opacity: 0.5;
+        cursor: default;
+    }
+}

package/components/matcha-panel.scss

@@ -0,0 +1,98 @@
+@mixin matcha-panel-theme($theme) {
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+
+    // Painel base
+    .matcha-panel {
+        background: map-get($background, surface);
+        border-radius: 8px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        max-height: 280px;
+        min-width: 160px;
+
+
+        // Animações
+        opacity: 0;
+        transform: scale(0.95) translateY(-8px);
+        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+
+        // Position sempre absolute agora
+        position: absolute;
+        z-index: 1003; // Z-index maior que o overlay (1002)
+
+        // Estados de abertura
+        &.matcha-panel-open {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+
+        // Quando o painel está visível (open = true)
+        &:not([aria-hidden="true"]) {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+
+        // Posicionamento vertical
+        &.matcha-panel-top {
+            transform-origin: bottom center;
+        }
+
+        &.matcha-panel-bottom {
+            transform-origin: top center;
+        }
+    }
+
+    // Conteúdo do painel
+    .matcha-panel-content {
+        overflow-y: auto;
+        flex: 1;
+
+        // Scrollbar customizada
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: rgba(0, 0, 0, 0.3);
+        }
+    }
+
+    // Estados de foco e hover
+    .matcha-panel:focus-within {
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    // Responsividade
+    @media (max-width: 768px) {
+        .matcha-panel {
+            max-height: 200px;
+            min-width: 120px;
+            border-radius: 6px;
+        }
+    }
+
+    // Tema escuro
+    @media (prefers-color-scheme: dark) {
+        .matcha-panel {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+            border-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+}
+

package/components/matcha-spinner.scss

@@ -155,7 +155,8 @@
     }
 }
 
-matcha-spinner:not([progress])  {
+matcha-spinner:not([progress]),
+matcha-spinner[progress="0"]  {
     $offset: 187;
     $duration: 1.4s;
 

package/components/matcha-tabs.scss

@@ -1,7 +1,7 @@
 @mixin _colorize-inactive-type-basic($theme, $color-functions) {
     &[inactivetype="basic"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group matcha-tab-item{
                     button[matcha-button],
                     a[matcha-button]{
@@ -37,7 +37,7 @@
         //disabled false
         &:not([disabled="true"]){
             @each $colorName, $colorFn in $color-functions {
-                &[inactivecolor="#{$colorName}"]{
+                &[inactivecolor="#{'' + $colorName}"]{
                     .button-group matcha-tab-item{
                         button[matcha-button],
                         a[matcha-button]{
@@ -75,7 +75,7 @@
 @mixin _colorize-inactive-type-alpha($theme, $color-functions) {
     &[inactivetype="alpha"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group matcha-tab-item{
                     button[matcha-button],
                     a[matcha-button]{
@@ -111,7 +111,7 @@
 
     &[inactivetype="link"]{
         @each $colorName, $colorFn in $color-functions {
-            &[inactivecolor="#{$colorName}"]{
+            &[inactivecolor="#{'' + $colorName}"]{
                 .button-group matcha-tab-item{
                     button[matcha-button],
                     a[matcha-button]{

package/main.scss

@@ -22,6 +22,9 @@
 
 // COMPONENTS
 @import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
+@import "./components/matcha-autocomplete.scss"; // matcha-autocomplete-theme($theme)
+@import "./components/matcha-option.scss"; // matcha-option-theme($theme)
+@import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
 @import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
 @import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
 @import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
@@ -50,6 +53,7 @@
 
 @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
 @import "./components/matcha-modal.scss"; // matcha-modal($theme)
+@import "./components/matcha-drawer.scss"; // matcha-drawer-theme($theme)
 // VENDORS
 @import "./vendors/angular-editor.scss";
 @import "./vendors/angular-material-fixes.scss";
@@ -158,4 +162,8 @@
     @include matcha-skeleton-theme($theme);
     @include matcha-radio($theme);
     @include matcha-avatar-theme($theme);
+    @include matcha-drawer-theme($theme);
+    @include matcha-autocomplete-theme($theme);
+    @include matcha-panel-theme($theme);
+    @include matcha-option-theme($theme);
 }

package/package.json

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

package/tokens/_color-tokens.scss

@@ -158,20 +158,20 @@ $color-base-green-a200: #69f0ae;
 $color-base-green-a400: #2cff5b;
 $color-base-green-a700: #13ff48;
 
-$color-base-light-green-50: #f1f8e9;
-$color-base-light-green-100: #dcedc8;
-$color-base-light-green-200: #c5e1a5;
-$color-base-light-green-300: #aed581;
-$color-base-light-green-400: #9ccc65;
-$color-base-light-green-500: #8bc34a;
-$color-base-light-green-600: #7cb342;
-$color-base-light-green-700: #689f38;
-$color-base-light-green-800: #558b2f;
-$color-base-light-green-900: #33691e;
-$color-base-light-green-a100: #ccff90;
-$color-base-light-green-a200: #b2ff59;
-$color-base-light-green-a400: #76ff03;
-$color-base-light-green-a700: #64dd17;
+$color-base-light-green-50: #E9F9DF;
+$color-base-light-green-100: #D4F4C0;
+$color-base-light-green-200: #B7ED96;
+$color-base-light-green-300: #9AE56B;
+$color-base-light-green-400: #84E04C;
+$color-base-light-green-500: #6EDA2C;
+$color-base-light-green-600: #5EB925;
+$color-base-light-green-700: #4D991F;
+$color-base-light-green-800: #376D16;
+$color-base-light-green-900: #274C0F;
+$color-base-light-green-a100: #D4FFBE;
+$color-base-light-green-a200: #B1FF8A;
+$color-base-light-green-a400: #8DFF56;
+$color-base-light-green-a700: #6AFF21;
 
 $color-base-lime-50: #f0f7e0;
 $color-base-lime-100: #dbebb3;
@@ -698,8 +698,8 @@ $mat-light-green: (
         200: $dark-primary-text,
         300: $dark-primary-text,
         400: $dark-primary-text,
-        500: $light-primary-text,
-        600: $light-primary-text,
+        500: $dark-primary-text,
+        600: $dark-primary-text,
         700: $light-primary-text,
         800: $light-primary-text,
         900: $light-primary-text,