matcha-theme 19.58.0 → 19.61.0

package/abstracts/_colors.scss

@@ -169,9 +169,9 @@ $index: 0;
     @include colors-classes-static($theme);
 
     .color-unset{
-        color: map-get($foreground, text );
+        color: map-get($foreground, foreground );
         .ripple {
-            background: map-get($foreground, text );
+            background: map-get($foreground, foreground );
         }
     }
     @each $colorName, $colorFn in $color-functions {

package/abstracts/_functions.scss

@@ -115,8 +115,8 @@
 }
 @function getBackgroundAlpha($theme){
     $background: map.get($theme, background);
-    $background-color: map.get($background, background);
-    @return rgba($background-color, 0.5);
+    $background-color: map.get($background, background-alpha);
+    @return $background-color;
 }
 @function getBackgroundInverse($theme){
     $background: map.get($theme, background);
@@ -125,8 +125,8 @@
 }
 @function getBackgroundAlphaInverse($theme){
     $background: map.get($theme, background);
-    $background-color: map.get($background, background-inverse);
-    @return rgba($background-color, 0.5);
+    $background-color: map.get($background, background-alpha-inverse);
+    @return $background-color;
 }
 
 // Surface
@@ -137,8 +137,8 @@
 }
 @function getSurfaceAlpha($theme){
     $background: map.get($theme, background);
-    $surface-color: map.get($background, card);
-    @return rgba($surface-color, 0.5);
+    $surface-color: map.get($background, card-alpha);
+    @return $surface-color;
 }
 @function getSurfaceInverse($theme){
     $background: map.get($theme, background);
@@ -147,36 +147,34 @@
 }
 @function getSurfaceAlphaInverse($theme){
     $background: map.get($theme, background);
-    $surface-color: map.get($background, card-inverse);
-    @return rgba($surface-color, 0.5);
+    $surface-color: map.get($background, card-alpha-inverse);
+    @return $surface-color;
 }
 
 
 // Foreground
 @function getForeground($theme){
     $foreground: map.get($theme, foreground);
-    $foreground: map.get($foreground, text);
+    $foreground: map.get($foreground, foreground);
     @return $foreground;
 }
 @function getForegroundInverse($theme){
     $foreground: map.get($theme, foreground);
-    $foreground-inverse: map.get($foreground, text-inverse);
+    $foreground-inverse: map.get($foreground, foreground-inverse);
     @return $foreground-inverse;
 }
 @function getForegroundAlpha($theme){
     $foreground: map.get($theme, foreground);
-    $foreground-color: map.get($foreground, text);
-    @return rgba($foreground-color, 0.5);
+    $foreground-color: map.get($foreground, foreground-alpha);
+    @return $foreground-color;
 }
 @function getForegroundAlphaInverse($theme){
     $foreground: map.get($theme, foreground);
-    $foreground-color: map.get($foreground, text-inverse);
-    @return rgba($foreground-color, 0.5);
+    $foreground-color: map.get($foreground, foreground-alpha-inverse);
+    @return $foreground-color;
 }
 
 
-
-
 // Disabled
 // #D4DDE3
 @function getDisabled($theme){
@@ -199,7 +197,7 @@
 @function getDisabledAlpha($theme) {
     $background: map.get($theme, background);
     $disabled-color: map.get($background, disabled);
-    @return rgba($disabled-color, 0.5);
+    @return color.change($disabled-color, $alpha: 0.5);
 }
 // rgba(0, 0, 0, 0.13)
 @function getDisabledContrastAlpha($theme){

package/base/_reset.scss

@@ -3,7 +3,7 @@
     $foreground: map-get($theme, foreground);
 
     & {
-        color: map-get($foreground, text);
+        color: map-get($foreground, foreground);
         background: map-get($background, background);
     }
 }
@@ -67,7 +67,7 @@ How to use
     }
 
     .text-basic {
-        color: map-get($foreground, text) !important;
+        color: map-get($foreground, foreground) !important;
     }
 
     // Changelog
@@ -119,7 +119,7 @@ How to use
     .message-box {
         background-color: rgba(map-get($primary, default), 0.2);
         border-left-color: map-get($primary, default);
-        color: map-get($foreground, text);
+        color: map-get($foreground, foreground);
 
         &.error,
         &.warning,
@@ -129,7 +129,7 @@ How to use
         &--warning,
         &--success,
         &--info {
-            color: map-get($foreground, text);
+            color: map-get($foreground, foreground);
         }
 
         &--error,

package/components/matcha-cards.scss

@@ -144,7 +144,7 @@
         // bg
         &[color="bg"][alpha]:not([alpha="false"]){
             background: getBackgroundAlpha($theme);
-            color: map-get($foreground, base)
+            color: map-get($foreground, foreground)
         }
         &[color="bg"][tint]:not([tint="false"]){
             background: getBackgroundAlpha($theme);
@@ -163,7 +163,7 @@
         // surface
         &[color="surface"][alpha]:not([alpha="false"]){
             background: getSurfaceAlpha($theme);
-            color: map-get($foreground, base)
+            color: map-get($foreground, foreground)
         }
         &[color="surface"][tint]:not([tint="false"]){
             background: getSurfaceAlpha($theme);
@@ -181,12 +181,12 @@
 
         // fg
         &[color="fg"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($foreground, base), 0.2);
-            color: map-get($foreground, base)
+            background: rgba(map-get($foreground, foreground), 0.2);
+            color: map-get($foreground, foreground)
         }
         &[color="fg"][tint]:not([tint="false"]){
-            background: rgba(map-get($foreground, base), 0.2);
-            color: map-get($foreground, text);
+            background: rgba(map-get($foreground, foreground), 0.2);
+            color: map-get($foreground, foreground);
         }
         &[color="fg"][outline]:not([outline="false"]),
         &[color="fg"][link]:not([link="false"]),
@@ -195,16 +195,16 @@
         }
         &[color="fg"]{
             background: getForeground($theme);
-            color: map-get($foreground, text-inverse);
+            color: map-get($foreground, foreground-inverse);
         }
 
         //basic
         &[color="basic"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($foreground, base), 0.2);
-            color: map-get($foreground, base)
+            background: rgba(map-get($foreground, foreground), 0.2);
+            color: map-get($foreground, foreground)
         }
         &[color="basic"][tint]:not([tint="false"]){
-            background: rgba(map-get($foreground, base), 0.2);
+            background: rgba(map-get($foreground, foreground), 0.2);
             color: getForeground($theme);
         }
         &[color="basic"][outline]:not([outline="false"]),

package/components/matcha-progress-bar.scss

@@ -57,7 +57,7 @@ How to use
 
         // matcha-progress-bar__progress
         &__label {
-            color: map-get($foreground, text-inverse);
+            color: map-get($foreground, foreground-inverse);
         }
     }
 }

package/components/matcha-table.scss

@@ -237,7 +237,7 @@
         .badge {
             border-radius: 8px;
             padding: 8px;
-            color: map-get($foreground, text-inverse);
+            color: map-get($foreground, foreground-inverse);
 
             &.live-badge {
                 background-color: map-get($background, cyan);

package/components/matcha-tooltip.scss

@@ -86,22 +86,22 @@
     $foreground: map-get($theme, foreground);
 
     .matcha-tooltip-content {
-        background-color: map-get($foreground, text);
-        color: map-get($foreground, text-inverse);
+        background-color: map-get($foreground, foreground);
+        color: map-get($foreground, foreground-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;
+            border-color: map-get($foreground, foreground) transparent transparent transparent;
         }
     }
 
     .matcha-tooltip-content_below::before {
-        border-color: transparent transparent map-get($foreground, text) transparent;
+        border-color: transparent transparent map-get($foreground, foreground) transparent;
     }
 
     .matcha-tooltip-content_left::after {
-        border-color: transparent transparent transparent map-get($foreground, text);
+        border-color: transparent transparent transparent map-get($foreground, foreground);
     }
 
     .matcha-tooltip-content_right::after {
-        border-color: transparent map-get($foreground, text) transparent transparent;
+        border-color: transparent map-get($foreground, foreground) transparent transparent;
     }
 }

package/package.json

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

package/tokens/_color-tokens.scss

@@ -1071,45 +1071,58 @@ $dark-grey: $mat-dark-grey;
 $light-theme-background-palette: (
     background: $color-base-light-grey-200,
     background-inverse: $color-base-dark-grey-700,
-    // background-alpha: rgba($color-base-light-grey-200, 0.5),
-    // background-alpha-inverse: rgba($color-base-dark-grey-700, 0.5),
+    background-alpha: rgba($color-base-light-grey-200, 0.5),
+    background-alpha-inverse: rgba($color-base-dark-grey-700, 0.5),
 
     card: $color-base-light-grey-50,
     card-inverse: $color-base-dark-grey-500,
-    // card-alpha: rgba($color-base-light-grey-50, 0.5),
-    // card-alpha-inverse: rgba($color-base-dark-grey-500, 0.5),
+    card-alpha: rgba($color-base-light-grey-50, 0.5),
+    card-alpha-inverse: rgba($color-base-dark-grey-500, 0.5),
 
+    disabled: $color-base-blue-grey-100,
+
+    // Precisa Remover
     sidebar: $color-base-blue-grey-50,
     sidebar-hover: $color-base-blue-grey-100,
     table-row-hover: $color-base-blue-grey-400,
-    disabled: $color-base-blue-grey-100,
 );
 
 // Background palette for dark themes.
 $dark-theme-background-palette: (
     background: $color-base-dark-grey-700,
     background-inverse: $color-base-blue-grey-50,
-    // background-alpha: rgba($color-base-dark-grey-700, 0.5),
-    // background-alpha-inverse: rgba($color-base-blue-grey-50, 0.5),
+    background-alpha: rgba($color-base-dark-grey-700, 0.5),
+    background-alpha-inverse: rgba($color-base-blue-grey-50, 0.5),
 
     card: $color-base-dark-grey-500,
     card-inverse: $color-base-blue-grey-50,
-    // card-alpha: rgba($color-base-dark-grey-500, 0.5),
-    // card-alpha-inverse: rgba($color-base-blue-grey-50, 0.5),
+    card-alpha: rgba($color-base-dark-grey-500, 0.5),
+    card-alpha-inverse: rgba($color-base-blue-grey-50, 0.5),
+
+    disabled: $color-base-dark-grey-700,
 
+    // Precisa Remover
     sidebar: $color-base-dark-grey-700,
     sidebar-hover: $color-base-blue-grey-800,
     table-row-hover: $color-base-dark-grey-700,
-    disabled: $color-base-dark-grey-700,
 );
 
 // Foreground palette for light themes.
 $light-theme-foreground-palette: (
-    base: $color-base-blue-grey-900,
+    foreground: $color-base-blue-grey-900,
+    foreground-inverse: $color-base-blue-grey-100,
+    foreground-alpha: rgba($color-base-blue-grey-900, 0.5),
+    foreground-alpha-inverse: rgba($color-base-blue-grey-50, 0.5),
+
+    label: $color-base-blue-grey-500,
+    placeholder: $color-base-blue-grey-400,
+
+    disabled: $color-base-blue-grey-100,
+    disabled-contrast: rgba($color-base-blue-grey-900, 0.5),
+
+    // Precisa Remover
     divider: rgba(0, 0, 0, 0.12),
     dividers: rgba(0, 0, 0, 0.12),
-    disabled: rgba(0, 0, 0, 0.26),
-    disabled-contrast: #f1f1f1,
     // disabled-button: rgba(0, 0, 0, 0.26),
     disabled-text: rgba(0, 0, 0, 0.38),
     elevation: black,
@@ -1127,17 +1140,24 @@ $light-theme-foreground-palette: (
     static-light-text: $color-base-blue-grey-50,
     static-dark-text: $color-base-blue-grey-900,
 
-    placeholder: $color-base-blue-grey-400,
-    label: $color-base-blue-grey-500,
 );
 
 // Foreground palette for dark themes.
 $dark-theme-foreground-palette: (
-    base: $color-base-blue-grey-50,
+    foreground: $color-base-blue-grey-100,
+    foreground-inverse: $color-base-blue-grey-900,
+    foreground-alpha: rgba($color-base-blue-grey-50, 0.5),
+    foreground-alpha-inverse: rgba($color-base-blue-grey-900, 0.5),
+
+    placeholder: $color-base-blue-grey-500,
+    label: $color-base-blue-grey-700,
+
+    disabled: $color-base-blue-grey-900,
+    disabled-contrast: rgba($color-base-blue-grey-100, 0.5),
+
+    // Precisa Remover
     divider: rgba(255, 255, 255, 0.12),
     dividers: rgba(255, 255, 255, 0.12),
-    disabled: rgba(255, 255, 255, 0.3),
-    disabled-contrast: #888888,
     // disabled-button: rgba(white, 0.3),
     disabled-text: rgba(255, 255, 255, 0.5),
     elevation: black,
@@ -1154,20 +1174,6 @@ $dark-theme-foreground-palette: (
     text-inverse: $color-base-blue-grey-900,
     static-light-text: $color-base-blue-grey-50,
     static-dark-text: $color-base-blue-grey-900,
-
     disabled-icon: $color-base-blue-grey-400,
-    placeholder: $color-base-blue-grey-200,
-    label: $color-base-blue-grey-100,
-);
-
-
-
-
-
-
-
-
-
-
-
 
+);

package/vendors/angular-editor.scss

@@ -32,7 +32,7 @@
                     }
 
                     i {
-                        color: map-get($foreground, text);
+                        color: map-get($foreground, foreground);
                         height: 24px !important;
                         width: 24px !important;
                         font-size: 16px !important;

package/vendors/calendar.scss

@@ -17,7 +17,7 @@
         &.active {
             .fc-day-number {
                 background-color: map-get($accent, default);
-                color: map-get($foreground, text-inverse);
+                color: map-get($foreground, foreground-inverse);
             }
         }
     }
@@ -25,7 +25,7 @@
     .fc-day-number {
         &:hover {
             background-color: map-get($primary, default);
-            color: map-get($foreground, text-inverse);
+            color: map-get($foreground, foreground-inverse);
         }
     }
 
@@ -46,7 +46,7 @@
             background-color: map-get($foreground, placeholder);
 
             .fc-icon {
-                color: map-get($foreground, text);
+                color: map-get($foreground, foreground);
             }
         }
     }
@@ -100,7 +100,7 @@
     .fc-day-top.fc-today {
         .fc-day-number {
             background-color: map-get($foreground, label);
-            color: map-get($foreground, text-inverse);
+            color: map-get($foreground, foreground-inverse);
         }
     }
 
@@ -2283,7 +2283,7 @@ Docs & License: https://fullcalendar.io/
 
         .cal-day-badge {
             background-color: map-get($foreground, graphic-red);
-            color: map-get($foreground, text-inverse);
+            color: map-get($foreground, foreground-inverse);
         }
 
         .cal-event {
@@ -2305,7 +2305,7 @@ Docs & License: https://fullcalendar.io/
         }
 
         .cal-open-day-events {
-            color: map-get($foreground, text);
+            color: map-get($foreground, foreground);
             background-color: map-get($background, disabled);
             -webkit-box-shadow: none;
             box-shadow: none;

package/vendors/charts.scss

@@ -66,7 +66,7 @@
             font-weight: normal;
             font-size: 16px !important;
             line-height: 20px;
-            color: map-get($foreground, text);
+            color: map-get($foreground, foreground);
         }
     }
 

package/vendors/ngx-material-timepicker.scss

@@ -14,14 +14,14 @@
         }
 
         .timepicker-dial__control {
-            color: map-color($foreground, text-inverse, 0.5) !important;
+            color: map-color($foreground, foreground-inverse, 0.5) !important;
         }
 
         .clock-face__number>span.active,
         .dial__control,
         .timepicker-dial__item_active,
         .timepicker-dial__time {
-            color: map-get($foreground, text-inverse) !important;
+            color: map-get($foreground, foreground-inverse) !important;
         }
 
         .timepicker-button {