matcha-theme 19.55.0 → 19.57.0

package/components/matcha-table.scss

@@ -112,7 +112,7 @@
         .mat-sort,
         .mat-expansion-panel {
             thead {
-                background: map-get($background, card);
+                background: getSurface($theme);
 
                 th {
                     height: 64px;
@@ -123,7 +123,7 @@
                 &.mat-row {
                     // &:nth-child(even){background: map-get($background, card);}
                     &:nth-child(odd) {
-                        background: map-get($background, background-alpha);
+                        background: getBackgroundAlpha($theme);
                     }
                 }
 
@@ -188,7 +188,7 @@
             }
 
             .mat-header-cell {
-                color: map-get($foreground, text);
+                color: getForeground($theme);
                 font-family: "CircularStd";
                 font-weight: 700;
                 font-size: 16px;
@@ -198,7 +198,7 @@
             }
 
             .mat-cell {
-                color: map-get($foreground, label);
+                color: getBlueGrey($theme);
                 font-size: 14px;
                 padding-left: 8px;
                 padding-right: 8px;

package/main.scss

@@ -42,6 +42,7 @@
 @import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
 @import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
 @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
+@import "./components/matcha-modal.scss"; // matcha-modal($theme)
 // VENDORS
 @import "./vendors/angular-editor.scss";
 @import "./vendors/angular-material-fixes.scss";
@@ -143,4 +144,5 @@
     @include matcha-spin($theme);
     @include matcha-hint-text($theme);
     @include matcha-tabs($theme);
+    @include matcha-modal-theme($theme);
 }

package/package.json

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

package/tokens/_color-tokens.scss

@@ -22,9 +22,7 @@ $color-base-red-a100: #ff8a80;
 $color-base-red-a200: #ff5252;
 $color-base-red-a400: #ff1744;
 $color-base-red-a700: #d50000;
-$color-base-red-200-alpha: #f29d9d33;
-$color-base-red-500-alpha: #e53a3a33;
-$color-base-red-900-alpha: #d3181833;
+
 $color-base-pink-50: #fce4ec;
 $color-base-pink-100: #f8bbd0;
 $color-base-pink-200: #f48fb1;
@@ -39,8 +37,7 @@ $color-base-pink-a100: #ff80ab;
 $color-base-pink-a200: #ff4081;
 $color-base-pink-a400: #f50057;
 $color-base-pink-a700: #c51162;
-$color-base-pink-200-alpha: #f48fb133;
-$color-base-pink-600-alpha: #d81b6033;
+
 $color-base-purple-50: #f3e6ff;
 $color-base-purple-100: #e1bee7;
 $color-base-purple-200: #ce93d8;
@@ -55,8 +52,7 @@ $color-base-purple-a100: #ea80fc;
 $color-base-purple-a200: #e040fb;
 $color-base-purple-a400: #d500f9;
 $color-base-purple-a700: #aa00ff;
-$color-base-purple-200-alpha: #ce93d833;
-$color-base-purple-500-alpha: #9c27b033;
+
 $color-base-deep-purple-50: #ede7f6;
 $color-base-deep-purple-100: #d1c4e9;
 $color-base-deep-purple-200: #b39ddb;
@@ -71,8 +67,7 @@ $color-base-deep-purple-a100: #cf97ff;
 $color-base-deep-purple-a200: #be73ff;
 $color-base-deep-purple-a400: #9f2eff;
 $color-base-deep-purple-a700: #7212ff;
-$color-base-deep-purple-200-alpha: #b39ddb33;
-$color-base-deep-purple-500-alpha: #673ab733;
+
 $color-base-indigo-50: #e8eaf6;
 $color-base-indigo-100: #c5cae9;
 $color-base-indigo-200: #9fa8da;
@@ -87,8 +82,7 @@ $color-base-indigo-a100: #8c9eff;
 $color-base-indigo-a200: #536dfe;
 $color-base-indigo-a400: #3d5afe;
 $color-base-indigo-a700: #304ffe;
-$color-base-indigo-200-alpha: #9fa8da33;
-$color-base-indigo-500-alpha: #3f51b533;
+
 $color-base-blue-50: #e4ebfb;
 $color-base-blue-100: #bccef4;
 $color-base-blue-200: #8faded;
@@ -103,8 +97,7 @@ $color-base-blue-a100: #82b1ff;
 $color-base-blue-a200: #448aff;
 $color-base-blue-a400: #2979ff;
 $color-base-blue-a700: #2962ff;
-$color-base-blue-200-alpha: #8faded33;
-$color-base-blue-500-alpha: #1e5bda33;
+
 $color-base-light-blue-50: #e1f5fe;
 $color-base-light-blue-100: #b3e5fc;
 $color-base-light-blue-200: #81d4fa;
@@ -119,8 +112,7 @@ $color-base-light-blue-a100: #80d8ff;
 $color-base-light-blue-a200: #40c4ff;
 $color-base-light-blue-a400: #33b6ff;
 $color-base-light-blue-a700: #0091ea;
-$color-base-light-blue-200-alpha: #81d4fa33;
-$color-base-light-blue-500-alpha: #03a9f433;
+
 $color-base-cyan-50: #e0f7fa;
 $color-base-cyan-100: #b2ebf2;
 $color-base-cyan-200: #84e1eb;
@@ -135,8 +127,7 @@ $color-base-cyan-a100: #84ffff;
 $color-base-cyan-a200: #18ffff;
 $color-base-cyan-a400: #00e5ff;
 $color-base-cyan-a700: #00b8d4;
-$color-base-cyan-200-alpha: #84e1eb33;
-$color-base-cyan-500-alpha: #00bcd433;
+
 $color-base-teal-50: #e0f2f1;
 $color-base-teal-100: #b2dfdb;
 $color-base-teal-200: #80cbc4;
@@ -151,8 +142,7 @@ $color-base-teal-a100: #a7ffeb;
 $color-base-teal-a200: #64ffda;
 $color-base-teal-a400: #1de9b6;
 $color-base-teal-a700: #00bfa5;
-$color-base-teal-200-alpha: #80cbc433;
-$color-base-teal-500-alpha: #00968833;
+
 $color-base-green-50: #e2f2e9;
 $color-base-green-100: #b8dec8;
 $color-base-green-200: #88c8a3;
@@ -167,8 +157,7 @@ $color-base-green-a100: #b9f6ca;
 $color-base-green-a200: #69f0ae;
 $color-base-green-a400: #2cff5b;
 $color-base-green-a700: #13ff48;
-$color-base-green-200-alpha: #88c8a333;
-$color-base-green-500-alpha: #11904633;
+
 $color-base-light-green-50: #f1f8e9;
 $color-base-light-green-100: #dcedc8;
 $color-base-light-green-200: #c5e1a5;
@@ -183,8 +172,7 @@ $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-200-alpha: #c5e1a533;
-$color-base-light-green-700-alpha: #689f3833;
+
 $color-base-lime-50: #f0f7e0;
 $color-base-lime-100: #dbebb3;
 $color-base-lime-200: #c3de80;
@@ -199,8 +187,7 @@ $color-base-lime-a100: #f4ff81;
 $color-base-lime-a200: #eeff41;
 $color-base-lime-a400: #c6ff00;
 $color-base-lime-a700: #aeea00;
-$color-base-lime-200-alpha: #c3de8033;
-$color-base-lime-500-alpha: #86bd0033;
+
 $color-base-yellow-50: #fcf8e0;
 $color-base-yellow-100: #f8edb3;
 $color-base-yellow-200: #f4e180;
@@ -215,8 +202,7 @@ $color-base-yellow-a100: #ffff8d;
 $color-base-yellow-a200: #ffff00;
 $color-base-yellow-a400: #ffea00;
 $color-base-yellow-a700: #ffd600;
-$color-base-yellow-200-alpha: #f4e18033;
-$color-base-yellow-500-alpha: #e8c30033;
+
 $color-base-amber-50: #fef4e4;
 $color-base-amber-100: #fee4ba;
 $color-base-amber-200: #fdd38d;
@@ -231,8 +217,7 @@ $color-base-amber-a100: #ffe57f;
 $color-base-amber-a200: #ffd740;
 $color-base-amber-a400: #ffc400;
 $color-base-amber-a700: #ffab00;
-$color-base-amber-200-alpha: #fdd38d33;
-$color-base-amber-500-alpha: #faa61a33;
+
 $color-base-orange-50: #feefe3;
 $color-base-orange-100: #fdd7b9;
 $color-base-orange-200: #fbbc8a;
@@ -247,8 +232,7 @@ $color-base-orange-a100: #ffd180;
 $color-base-orange-a200: #ffab40;
 $color-base-orange-a400: #ff9100;
 $color-base-orange-a700: #ff6d00;
-$color-base-orange-200-alpha: #fbbc8a33;
-$color-base-orange-500-alpha: #f7781433;
+
 $color-base-deep-orange-50: #fbe9e7;
 $color-base-deep-orange-100: #ffccbc;
 $color-base-deep-orange-200: #ffab91;
@@ -263,8 +247,7 @@ $color-base-deep-orange-a100: #ff9e80;
 $color-base-deep-orange-a200: #ff6e40;
 $color-base-deep-orange-a400: #ff3d00;
 $color-base-deep-orange-a700: #dd2c00;
-$color-base-deep-orange-200-alpha: #ffab9133;
-$color-base-deep-orange-500-alpha: #ff572233;
+
 $color-base-brown-50: #efebe9;
 $color-base-brown-100: #d7ccc8;
 $color-base-brown-200: #bcaaa4;
@@ -279,8 +262,7 @@ $color-base-brown-a100: $color-base-brown-100;
 $color-base-brown-a200: $color-base-brown-200;
 $color-base-brown-a400: $color-base-brown-400;
 $color-base-brown-a700: $color-base-brown-700;
-$color-base-brown-200-alpha: #bcaaa433;
-$color-base-brown-500-alpha: #79554833;
+
 $color-base-grey-50: #EFF1F2;
 $color-base-grey-100: #DEE3E6;
 $color-base-grey-200: #C8D0D5;
@@ -295,88 +277,51 @@ $color-base-grey-a100: #FFFFFF;
 $color-base-grey-a200: #E7EDF1;
 $color-base-grey-a400: #C0CEDA;
 $color-base-grey-a700: #98AFC2;
-$color-base-grey-200-alpha: #C8D0D533;
-$color-base-grey-500-alpha: #91A0AA33;
-$color-base-blue-grey-50: #f5f7fa;
-$color-base-blue-grey-100: #d4dde3;
-$color-base-blue-grey-200: #b5c1c8;
-$color-base-blue-grey-300: #a3b1b9;
-$color-base-blue-grey-400: #91a0aa;
-$color-base-blue-grey-500: #636f78;
-$color-base-blue-grey-600: #4c545a;
-$color-base-blue-grey-700: #3c4044;
-$color-base-blue-grey-800: #2b2c2d;
-$color-base-blue-grey-900: #1b1c1d;
-$color-base-blue-grey-a100: #acb4ba;
-$color-base-blue-grey-a200: #707f88;
-$color-base-blue-grey-a400: #435560;
-$color-base-blue-grey-a700: #223744;
-$color-base-blue-grey-200-alpha: #b5c1c833;
-$color-base-blue-grey-500-alpha: #636f7833;
-$color-base-light-grey-50: #fbfbfb;
-$color-base-light-grey-100: #f8f8f8;
-$color-base-light-grey-200: #f6f6f6;
-$color-base-light-grey-300: #f4f4f4;
-$color-base-light-grey-400: #f2f2f2;
-$color-base-light-grey-500: #f0f0f0;
-$color-base-light-grey-600: #efefef;
-$color-base-light-grey-700: #eeeeee;
-$color-base-light-grey-800: #ededed;
-$color-base-light-grey-900: #ececec;
+
+$color-base-blue-grey-50: #FFFFFF;
+$color-base-blue-grey-100: #E2E7E9; // disabled - light-theme
+$color-base-blue-grey-200: #C4CFD4;
+$color-base-blue-grey-300: #A7B6BE;
+$color-base-blue-grey-400: #8A9EA8;
+$color-base-blue-grey-500: #7E8E95;
+$color-base-blue-grey-600: #5A6A72;
+$color-base-blue-grey-700: #435056;
+$color-base-blue-grey-800: #2B363B;
+$color-base-blue-grey-900: #21282C;
+$color-base-blue-grey-a100: $color-base-blue-grey-100;
+$color-base-blue-grey-a200: $color-base-blue-grey-200;
+$color-base-blue-grey-a400: $color-base-blue-grey-400;
+$color-base-blue-grey-a700: $color-base-blue-grey-700;
+
+$color-base-light-grey-50:#FFFFFF;
+$color-base-light-grey-100:#F8F9FC;
+$color-base-light-grey-200:#F2F3F8; // background - light-theme
+$color-base-light-grey-300:#EAECF6;
+$color-base-light-grey-400:#E2E5F3;
+$color-base-light-grey-500:#DBDFF0;
+$color-base-light-grey-600:#D4D8ED;
+$color-base-light-grey-700:#CDD2EA;
+$color-base-light-grey-800:#C6CBE7;
+$color-base-light-grey-900:#BFC5E3;
 $color-base-light-grey-a100: $color-base-light-grey-100;
 $color-base-light-grey-a200: $color-base-light-grey-200;
 $color-base-light-grey-a400: $color-base-light-grey-400;
 $color-base-light-grey-a700: $color-base-light-grey-700;
-$color-base-light-grey-200-alpha: #f6f6f633;
-$color-base-light-grey-500-alpha: #f0f0f033;
-$color-base-dark-grey-50: #464646;
-$color-base-dark-grey-100: #3b3b3b;
-$color-base-dark-grey-200: #383838;
-$color-base-dark-grey-300: #303030;
-$color-base-dark-grey-400: #2b2b2b;
-$color-base-dark-grey-500: #282828;
-$color-base-dark-grey-600: #262626;
-$color-base-dark-grey-700: #1b1b1b;
-$color-base-dark-grey-800: #181818;
-$color-base-dark-grey-900: #161616;
+
+$color-base-dark-grey-50: #2E2E2E;
+$color-base-dark-grey-100: #292929;
+$color-base-dark-grey-200: #242424;
+$color-base-dark-grey-300: #1F1F1F;
+$color-base-dark-grey-400: #1A1A1A;
+$color-base-dark-grey-500: #141414;
+$color-base-dark-grey-600: #0F0F0F;
+$color-base-dark-grey-700: #0A0A0A;
+$color-base-dark-grey-800: #050505;
+$color-base-dark-grey-900: #000000;
 $color-base-dark-grey-a100: $color-base-dark-grey-100;
 $color-base-dark-grey-a200: $color-base-dark-grey-200;
 $color-base-dark-grey-a400: $color-base-dark-grey-400;
 $color-base-dark-grey-a700: $color-base-dark-grey-700;
-$color-base-dark-grey-200-alpha: #38383833;
-$color-base-dark-grey-500-alpha: #28282833;
-$color-base-white: #ffffff;
-$color-base-black: #000000;
-$color-brand-primary: #86bd00;
-$color-brand-primary-wl: #1e5bda;
-$color-feedback-error: #e53a3a;
-$color-feedback-error-light: #f29d9d;
-$color-feedback-error-dark: #d31818;
-$color-feedback-warning: #e8c300;
-$color-feedback-warning-light: #f4e180;
-$color-feedback-warning-dark: #d8a100;
-$color-feedback-success: #35a162;
-$color-feedback-success-light: #b8dec8;
-$color-feedback-success-dark: #0f883f;
-$color-graphic-blue: #1e5bda;
-$color-graphic-blue-light: #628ce5;
-$color-graphic-blue-dark: #1649d0;
-$color-graphic-cyan: #00bcd4;
-$color-graphic-cyan-light: #4dd0e1;
-$color-graphic-cyan-dark: #02a1bc;
-$color-graphic-purple: #9c27b0;
-$color-graphic-purple-light: #ba68c8;
-$color-graphic-purple-dark: #7b1fa2;
-$color-graphic-orange: #f77814;
-$color-graphic-orange-light: #f9a15b;
-$color-graphic-orange-dark: #f5650e;
-$color-font-base: #1b1c1d;
-$color-font-inverse: #ffffff;
-$color-font-primary: #86bd00;
-$color-font-primary-wl: #1e5bda;
-$color-font-label: #4c545a;
-$color-font-placeholder: #91a0aa;
-$color-font-disabled: #b5c1c8;
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Color maps
@@ -1124,41 +1069,43 @@ $dark-grey: $mat-dark-grey;
 // --------------------------------------------------------------------------------------------------------------------
 
 $light-theme-background-palette: (
-    background: $color-base-blue-grey-50,
+    background: $color-base-light-grey-200,
     background-inverse: $color-base-dark-grey-700,
-    background-alpha: #f5f7fa8c,
-    background-alpha-inverse: #1b1b1b80,
-    card: white,
-    card-inverse: $color-base-blue-grey-800,
-    card-alpha: #ffffff80,
-    card-alpha-inverse: #2b2c2d80,
+    // 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),
 
     sidebar: $color-base-blue-grey-50,
-    sidebar-hover: white,
-    table-row-hover: #788cb412,
-    disabled: #d4dde3,
+    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: #1b1b1b80,
-    background-alpha-inverse: #f5f7fa80,
-    card: $color-base-blue-grey-800,
-    card-inverse: white,
-    card-alpha: #2b2c2d80,
-    card-alpha-inverse: #ffffff80,
+    // 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),
 
     sidebar: $color-base-dark-grey-700,
     sidebar-hover: $color-base-blue-grey-800,
-    table-row-hover: #0000002b,
-    disabled: rgba(15, 15, 15, 0.3),
+    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-a700,
+    base: $color-base-blue-grey-900,
     divider: rgba(0, 0, 0, 0.12),
     dividers: rgba(0, 0, 0, 0.12),
     disabled: rgba(0, 0, 0, 0.26),
@@ -1169,16 +1116,16 @@ $light-theme-foreground-palette: (
     hint-text: $color-base-blue-grey-400,
     secondary-text: rgba(0, 0, 0, 0.54),
     icon: $color-base-blue-grey-400,
-    icon-active: $color-base-blue-grey-a700,
+    icon-active: $color-base-blue-grey-900,
     icons: rgba(0, 0, 0, 0.54),
     slider-min: rgba(0, 0, 0, 0.87),
     slider-off: rgba(0, 0, 0, 0.26),
     slider-off-active: rgba(0, 0, 0, 0.38),
     // helper classes
-    text: $color-base-blue-grey-a700,
+    text: $color-base-blue-grey-900,
     text-inverse: $color-base-blue-grey-50,
     static-light-text: $color-base-blue-grey-50,
-    static-dark-text: $color-base-blue-grey-a700,
+    static-dark-text: $color-base-blue-grey-900,
 
     placeholder: $color-base-blue-grey-400,
     label: $color-base-blue-grey-500,
@@ -1204,11 +1151,23 @@ $dark-theme-foreground-palette: (
     slider-off-active: rgba(255, 255, 255, 0.3),
     // helper classes
     text: $color-base-blue-grey-50,
-    text-inverse: $color-base-blue-grey-a700,
+    text-inverse: $color-base-blue-grey-900,
     static-light-text: $color-base-blue-grey-50,
-    static-dark-text: $color-base-blue-grey-a700,
+    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,
 );
+
+
+
+
+
+
+
+
+
+
+
+