matcha-theme 18.0.27 → 18.1.28

package/tokens/_color-tokens.scss

@@ -0,0 +1,1216 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Deprecated renamed to $dark-primary-text.
+// --------------------------------------------------------------------------------------------------------------------
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Color variables
+// --------------------------------------------------------------------------------------------------------------------
+
+$color-base-red-50: #fce7e7;
+$color-base-red-100: #f7c4c4;
+$color-base-red-200: #f29d9d;
+$color-base-red-300: #ed7575;
+$color-base-red-400: #e95858;
+$color-base-red-500: #e53a3a;
+$color-base-red-600: #e23434;
+$color-base-red-700: #de2c2c;
+$color-base-red-800: #da2525;
+$color-base-red-900: #d31818;
+$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;
+$color-base-pink-300: #f06e9a;
+$color-base-pink-400: #ec407a;
+$color-base-pink-500: #e91e63;
+$color-base-pink-600: #d81b60;
+$color-base-pink-700: #c2185b;
+$color-base-pink-800: #ad1457;
+$color-base-pink-900: #880e4f;
+$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;
+$color-base-purple-300: #ba68c8;
+$color-base-purple-400: #ab47bc;
+$color-base-purple-500: #9c27b0;
+$color-base-purple-600: #8e24aa;
+$color-base-purple-700: #7b1fa2;
+$color-base-purple-800: #6a1b9a;
+$color-base-purple-900: #4a148c;
+$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;
+$color-base-deep-purple-300: #9575cd;
+$color-base-deep-purple-400: #7e57c2;
+$color-base-deep-purple-500: #673ab7;
+$color-base-deep-purple-600: #5e35b1;
+$color-base-deep-purple-700: #512da8;
+$color-base-deep-purple-800: #4527a0;
+$color-base-deep-purple-900: #311b92;
+$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;
+$color-base-indigo-300: #7986cb;
+$color-base-indigo-400: #5c6bc0;
+$color-base-indigo-500: #3f51b5;
+$color-base-indigo-600: #3949ab;
+$color-base-indigo-700: #303f9f;
+$color-base-indigo-800: #283593;
+$color-base-indigo-900: #1a237e;
+$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;
+$color-base-blue-300: #628ce5;
+$color-base-blue-400: #4074e0;
+$color-base-blue-500: #1e5bda;
+$color-base-blue-600: #1a53d6;
+$color-base-blue-700: #1649d0;
+$color-base-blue-800: #1240cb;
+$color-base-blue-900: #0a2fc2;
+$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;
+$color-base-light-blue-300: #4fc3f7;
+$color-base-light-blue-400: #29b6f6;
+$color-base-light-blue-500: #03a9f4;
+$color-base-light-blue-600: #039be5;
+$color-base-light-blue-700: #0288d1;
+$color-base-light-blue-800: #0277bd;
+$color-base-light-blue-900: #01579b;
+$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;
+$color-base-cyan-300: #4dd0e1;
+$color-base-cyan-400: #08c3d6;
+$color-base-cyan-500: #00bcd4;
+$color-base-cyan-600: #00acc1;
+$color-base-cyan-700: #02a1bc;
+$color-base-cyan-800: #00838f;
+$color-base-cyan-900: #006064;
+$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;
+$color-base-teal-300: #4db6ac;
+$color-base-teal-400: #26a69a;
+$color-base-teal-500: #009688;
+$color-base-teal-600: #00897b;
+$color-base-teal-700: #00796b;
+$color-base-teal-800: #00695c;
+$color-base-teal-900: #004d40;
+$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;
+$color-base-green-300: #58b17e;
+$color-base-green-400: #35a162;
+$color-base-green-500: #119046;
+$color-base-green-600: #0f883f;
+$color-base-green-700: #0c7d37;
+$color-base-green-800: #0a732f;
+$color-base-green-900: #056120;
+$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;
+$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-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;
+$color-base-lime-300: #aad14d;
+$color-base-lime-400: #98c726;
+$color-base-lime-500: #86bd00;
+$color-base-lime-600: #7eb700;
+$color-base-lime-700: #73ae00;
+$color-base-lime-800: #69a600;
+$color-base-lime-900: #569800;
+$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;
+$color-base-yellow-300: #efd54d;
+$color-base-yellow-400: #ebcc26;
+$color-base-yellow-500: #e8c300;
+$color-base-yellow-600: #e5bd00;
+$color-base-yellow-700: #e2b500;
+$color-base-yellow-800: #deae00;
+$color-base-yellow-900: #d8a100;
+$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;
+$color-base-amber-300: #fcc15f;
+$color-base-amber-400: #fbb33c;
+$color-base-amber-500: #faa61a;
+$color-base-amber-600: #f99e17;
+$color-base-amber-700: #f99513;
+$color-base-amber-800: #f88b0f;
+$color-base-amber-900: #f67b08;
+$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;
+$color-base-orange-300: #f9a15b;
+$color-base-orange-400: #f88c37;
+$color-base-orange-500: #f77814;
+$color-base-orange-600: #f67012;
+$color-base-orange-700: #f5650e;
+$color-base-orange-800: #f35b0b;
+$color-base-orange-900: #f14806;
+$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;
+$color-base-deep-orange-300: #ff8a65;
+$color-base-deep-orange-400: #ff7043;
+$color-base-deep-orange-500: #ff5722;
+$color-base-deep-orange-600: #f4511e;
+$color-base-deep-orange-700: #e64a19;
+$color-base-deep-orange-800: #d84315;
+$color-base-deep-orange-900: #bf360c;
+$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;
+$color-base-brown-300: #a1887f;
+$color-base-brown-400: #8d6e63;
+$color-base-brown-500: #795548;
+$color-base-brown-600: #6d4c41;
+$color-base-brown-700: #5d4037;
+$color-base-brown-800: #4e342e;
+$color-base-brown-900: #3e2723;
+$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: #fafafa;
+$color-base-grey-100: #f5f5f5;
+$color-base-grey-200: #eeeeee;
+$color-base-grey-300: #e0e0e0;
+$color-base-grey-400: #bdbdbd;
+$color-base-grey-500: #9e9e9e;
+$color-base-grey-600: #757575;
+$color-base-grey-700: #616161;
+$color-base-grey-800: #464646;
+$color-base-grey-900: #262626;
+$color-base-grey-a100: $color-base-grey-100;
+$color-base-grey-a200: $color-base-grey-200;
+$color-base-grey-a400: $color-base-grey-400;
+$color-base-grey-a700: $color-base-grey-700;
+$color-base-grey-200-alpha: #eeeeee33;
+$color-base-grey-500-alpha: #9e9e9e33;
+$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-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-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
+// --------------------------------------------------------------------------------------------------------------------
+
+$mat-red: (
+    50: $color-base-red-50,
+    100: $color-base-red-100,
+    200: $color-base-red-200,
+    300: $color-base-red-300,
+    400: $color-base-red-400,
+    500: $color-base-red-500,
+    600: $color-base-red-600,
+    700: $color-base-red-700,
+    800: $color-base-red-800,
+    900: $color-base-red-900,
+    A100: $color-base-red-a100,
+    A200: $color-base-red-a200,
+    A400: $color-base-red-a400,
+    A700: $color-base-red-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$red: $mat-red;
+
+$mat-pink: (
+    50: $color-base-pink-50,
+    100: $color-base-pink-100,
+    200: $color-base-pink-200,
+    300: $color-base-pink-300,
+    400: $color-base-pink-400,
+    500: $color-base-pink-500,
+    600: $color-base-pink-600,
+    700: $color-base-pink-700,
+    800: $color-base-pink-800,
+    900: $color-base-pink-900,
+    A100: $color-base-pink-a100,
+    A200: $color-base-pink-a200,
+    A400: $color-base-pink-a400,
+    A700: $color-base-pink-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$pink: $mat-pink;
+
+$mat-purple: (
+    50: $color-base-purple-50,
+    100: $color-base-purple-100,
+    200: $color-base-purple-200,
+    300: $color-base-purple-300,
+    400: $color-base-purple-400,
+    500: $color-base-purple-500,
+    600: $color-base-purple-600,
+    700: $color-base-purple-700,
+    800: $color-base-purple-800,
+    900: $color-base-purple-900,
+    A100: $color-base-purple-a100,
+    A200: $color-base-purple-a200,
+    A400: $color-base-purple-a400,
+    A700: $color-base-purple-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$purple: $mat-purple;
+
+$mat-deep-purple: (
+    50: $color-base-deep-purple-50,
+    100: $color-base-deep-purple-100,
+    200: $color-base-deep-purple-200,
+    300: $color-base-deep-purple-300,
+    400: $color-base-deep-purple-400,
+    500: $color-base-deep-purple-500,
+    600: $color-base-deep-purple-600,
+    700: $color-base-deep-purple-700,
+    800: $color-base-deep-purple-800,
+    900: $color-base-deep-purple-900,
+    A100: $color-base-deep-purple-a100,
+    A200: $color-base-deep-purple-a200,
+    A400: $color-base-deep-purple-a400,
+    A700: $color-base-deep-purple-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$deep-purple: $mat-deep-purple;
+
+$mat-indigo: (
+    50: $color-base-indigo-50,
+    100: $color-base-indigo-100,
+    200: $color-base-indigo-200,
+    300: $color-base-indigo-300,
+    400: $color-base-indigo-400,
+    500: $color-base-indigo-500,
+    600: $color-base-indigo-600,
+    700: $color-base-indigo-700,
+    800: $color-base-indigo-800,
+    900: $color-base-indigo-900,
+    A100: $color-base-indigo-a100,
+    A200: $color-base-indigo-a200,
+    A400: $color-base-indigo-a400,
+    A700: $color-base-indigo-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$indigo: $mat-indigo;
+
+$mat-blue: (
+    50: $color-base-blue-50,
+    100: $color-base-blue-100,
+    200: $color-base-blue-200,
+    300: $color-base-blue-300,
+    400: $color-base-blue-400,
+    500: $color-base-blue-500,
+    600: $color-base-blue-600,
+    700: $color-base-blue-700,
+    800: $color-base-blue-800,
+    900: $color-base-blue-900,
+    A100: $color-base-blue-a100,
+    A200: $color-base-blue-a200,
+    A400: $color-base-blue-a400,
+    A700: $color-base-blue-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$blue: $mat-blue;
+
+$mat-light-blue: (
+    50: $color-base-light-blue-50,
+    100: $color-base-light-blue-100,
+    200: $color-base-light-blue-200,
+    300: $color-base-light-blue-300,
+    400: $color-base-light-blue-400,
+    500: $color-base-light-blue-500,
+    600: $color-base-light-blue-600,
+    700: $color-base-light-blue-700,
+    800: $color-base-light-blue-800,
+    900: $color-base-light-blue-900,
+    A100: $color-base-light-blue-a100,
+    A200: $color-base-light-blue-a200,
+    A400: $color-base-light-blue-a400,
+    A700: $color-base-light-blue-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$light-blue: $mat-light-blue;
+
+$mat-cyan: (
+    50: $color-base-cyan-50,
+    100: $color-base-cyan-100,
+    200: $color-base-cyan-200,
+    300: $color-base-cyan-300,
+    400: $color-base-cyan-400,
+    500: $color-base-cyan-500,
+    600: $color-base-cyan-600,
+    700: $color-base-cyan-700,
+    800: $color-base-cyan-800,
+    900: $color-base-cyan-900,
+    A100: $color-base-cyan-a100,
+    A200: $color-base-cyan-a200,
+    A400: $color-base-cyan-a400,
+    A700: $color-base-cyan-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$cyan: $mat-cyan;
+
+$mat-teal: (
+    50: $color-base-teal-50,
+    100: $color-base-teal-100,
+    200: $color-base-teal-200,
+    300: $color-base-teal-300,
+    400: $color-base-teal-400,
+    500: $color-base-teal-500,
+    600: $color-base-teal-600,
+    700: $color-base-teal-700,
+    800: $color-base-teal-800,
+    900: $color-base-teal-900,
+    A100: $color-base-teal-a100,
+    A200: $color-base-teal-a200,
+    A400: $color-base-teal-a400,
+    A700: $color-base-teal-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$teal: $mat-teal;
+
+$mat-green: (
+    50: $color-base-green-50,
+    100: $color-base-green-100,
+    200: $color-base-green-200,
+    300: $color-base-green-300,
+    400: $color-base-green-400,
+    500: $color-base-green-500,
+    600: $color-base-green-600,
+    700: $color-base-green-700,
+    800: $color-base-green-800,
+    900: $color-base-green-900,
+    A100: $color-base-green-a100,
+    A200: $color-base-green-a200,
+    A400: $color-base-green-a400,
+    A700: $color-base-green-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$green: $mat-green;
+
+$mat-light-green: (
+    50: $color-base-light-green-50,
+    100: $color-base-light-green-100,
+    200: $color-base-light-green-200,
+    300: $color-base-light-green-300,
+    400: $color-base-light-green-400,
+    500: $color-base-light-green-500,
+    600: $color-base-light-green-600,
+    700: $color-base-light-green-700,
+    800: $color-base-light-green-800,
+    900: $color-base-light-green-900,
+    A100: $color-base-light-green-a100,
+    A200: $color-base-light-green-a200,
+    A400: $color-base-light-green-a400,
+    A700: $color-base-light-green-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $dark-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$light-green: $mat-light-green;
+
+$mat-lime: (
+    50: $color-base-lime-50,
+    100: $color-base-lime-100,
+    200: $color-base-lime-200,
+    300: $color-base-lime-300,
+    400: $color-base-lime-400,
+    500: $color-base-lime-500,
+    600: $color-base-lime-600,
+    700: $color-base-lime-700,
+    800: $color-base-lime-800,
+    900: $color-base-lime-900,
+    A100: $color-base-lime-a100,
+    A200: $color-base-lime-a200,
+    A400: $color-base-lime-a400,
+    A700: $color-base-lime-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$lime: $mat-lime;
+
+$mat-yellow: (
+    50: $color-base-yellow-50,
+    100: $color-base-yellow-100,
+    200: $color-base-yellow-200,
+    300: $color-base-yellow-300,
+    400: $color-base-yellow-400,
+    500: $color-base-yellow-500,
+    600: $color-base-yellow-600,
+    700: $color-base-yellow-700,
+    800: $color-base-yellow-800,
+    900: $color-base-yellow-900,
+    A100: $color-base-yellow-a100,
+    A200: $color-base-yellow-a200,
+    A400: $color-base-yellow-a400,
+    A700: $color-base-yellow-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $dark-primary-text,
+        700: $dark-primary-text,
+        800: $dark-primary-text,
+        900: $dark-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$yellow: $mat-yellow;
+
+$mat-amber: (
+    50: $color-base-amber-50,
+    100: $color-base-amber-100,
+    200: $color-base-amber-200,
+    300: $color-base-amber-300,
+    400: $color-base-amber-400,
+    500: $color-base-amber-500,
+    600: $color-base-amber-600,
+    700: $color-base-amber-700,
+    800: $color-base-amber-800,
+    900: $color-base-amber-900,
+    A100: $color-base-amber-a100,
+    A200: $color-base-amber-a200,
+    A400: $color-base-amber-a400,
+    A700: $color-base-amber-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $dark-primary-text,
+        700: $dark-primary-text,
+        800: $dark-primary-text,
+        900: $dark-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$amber: $mat-amber;
+
+$mat-orange: (
+    50: $color-base-orange-50,
+    100: $color-base-orange-100,
+    200: $color-base-orange-200,
+    300: $color-base-orange-300,
+    400: $color-base-orange-400,
+    500: $color-base-orange-500,
+    600: $color-base-orange-600,
+    700: $color-base-orange-700,
+    800: $color-base-orange-800,
+    900: $color-base-orange-900,
+    A100: $color-base-orange-a100,
+    A200: $color-base-orange-a200,
+    A400: $color-base-orange-a400,
+    A700: $color-base-orange-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $dark-primary-text,
+        700: $dark-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+// Alias for alternate spelling.
+$orange: $mat-orange;
+
+$mat-deep-orange: (
+    50: $color-base-deep-orange-50,
+    100: $color-base-deep-orange-100,
+    200: $color-base-deep-orange-200,
+    300: $color-base-deep-orange-300,
+    400: $color-base-deep-orange-400,
+    500: $color-base-deep-orange-500,
+    600: $color-base-deep-orange-600,
+    700: $color-base-deep-orange-700,
+    800: $color-base-deep-orange-800,
+    900: $color-base-deep-orange-900,
+    A100: $color-base-deep-orange-a100,
+    A200: $color-base-deep-orange-a200,
+    A400: $color-base-deep-orange-a400,
+    A700: $color-base-deep-orange-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$deep-orange: $mat-deep-orange;
+
+$mat-brown: (
+    50: $color-base-brown-50,
+    100: $color-base-brown-100,
+    200: $color-base-brown-200,
+    300: $color-base-brown-300,
+    400: $color-base-brown-400,
+    500: $color-base-brown-500,
+    600: $color-base-brown-600,
+    700: $color-base-brown-700,
+    800: $color-base-brown-800,
+    900: $color-base-brown-900,
+    A100: $color-base-brown-a100,
+    A200: $color-base-brown-a200,
+    A400: $color-base-brown-a400,
+    A700: $color-base-brown-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$brown: $mat-brown;
+
+$mat-grey: (
+    50: $color-base-grey-50,
+    100: $color-base-grey-100,
+    200: $color-base-grey-200,
+    300: $color-base-grey-300,
+    400: $color-base-grey-400,
+    500: $color-base-grey-500,
+    600: $color-base-grey-600,
+    700: $color-base-grey-700,
+    800: $color-base-grey-800,
+    900: $color-base-grey-900,
+    A100: $color-base-grey-a100,
+    A200: $color-base-grey-a200,
+    A400: $color-base-grey-a400,
+    A700: $color-base-grey-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$grey: $mat-grey;
+$mat-gray: $mat-grey;
+
+$mat-blue-grey: (
+    50: $color-base-blue-grey-50,
+    100: $color-base-blue-grey-100,
+    200: $color-base-blue-grey-200,
+    300: $color-base-blue-grey-300,
+    400: $color-base-blue-grey-400,
+    500: $color-base-blue-grey-500,
+    600: $color-base-blue-grey-600,
+    700: $color-base-blue-grey-700,
+    800: $color-base-blue-grey-800,
+    900: $color-base-blue-grey-900,
+    A100: $color-base-blue-grey-a100,
+    A200: $color-base-blue-grey-a200,
+    A400: $color-base-blue-grey-a400,
+    A700: $color-base-blue-grey-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$blue-grey: $mat-blue-grey;
+// Alias for alternate spelling.
+$mat-blue-gray: $mat-blue-grey;
+
+$mat-light-grey: (
+    50: $color-base-light-grey-50,
+    100: $color-base-light-grey-100,
+    200: $color-base-light-grey-200,
+    300: $color-base-light-grey-300,
+    400: $color-base-light-grey-400,
+    500: $color-base-light-grey-500,
+    600: $color-base-light-grey-600,
+    700: $color-base-light-grey-700,
+    800: $color-base-light-grey-800,
+    900: $color-base-light-grey-900,
+    A100: $color-base-light-grey-a100,
+    A200: $color-base-light-grey-a200,
+    A400: $color-base-light-grey-a400,
+    A700: $color-base-light-grey-a700,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $dark-primary-text,
+        400: $dark-primary-text,
+        500: $dark-primary-text,
+        600: $dark-primary-text,
+        700: $dark-primary-text,
+        800: $dark-primary-text,
+        900: $dark-primary-text,
+        A100: $dark-primary-text,
+        A200: $dark-primary-text,
+        A400: $dark-primary-text,
+        A700: $dark-primary-text
+    )
+);
+$light-grey: $mat-light-grey;
+
+$mat-dark-grey: (
+    50: $color-base-dark-grey-50,
+    100: $color-base-dark-grey-100,
+    200: $color-base-dark-grey-200,
+    300: $color-base-dark-grey-300,
+    400: $color-base-dark-grey-400,
+    500: $color-base-dark-grey-500,
+    600: $color-base-dark-grey-600,
+    700: $color-base-dark-grey-700,
+    800: $color-base-dark-grey-800,
+    900: $color-base-dark-grey-900,
+    A100: $color-base-dark-grey-a100,
+    A200: $color-base-dark-grey-a200,
+    A400: $color-base-dark-grey-a400,
+    A700: $color-base-dark-grey-a700,
+    contrast: (
+        50: $light-primary-text,
+        100: $light-primary-text,
+        200: $light-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $light-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+// Alias for alternate spelling.
+$dark-grey: $mat-dark-grey;
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Color palette for Surface & Base Colors.
+// --------------------------------------------------------------------------------------------------------------------
+
+$light-theme-background-palette: (
+    // status-bar: $color-base-grey-300,
+    // app-bar: white,
+    // hover: rgba(black, 0.04),
+    background: $color-base-blue-grey-50,
+    background-inverse: $color-base-dark-grey-700,
+    background-alpha: #f5f7fa80,
+    background-alpha-inverse: #1b1b1b80,
+    card: white,
+    card-inverse: $color-base-blue-grey-800,
+    card-alpha: #ffffff80,
+    card-alpha-inverse: #2b2c2d80,
+
+    sidebar: $color-base-blue-grey-50,
+    sidebar-hover: white,
+    table-row-hover: #788cb412,
+    disabled: rgba(239, 239, 239, 0.3),
+);
+
+// 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,
+    
+    sidebar: $color-base-dark-grey-700,
+    sidebar-hover: $color-base-blue-grey-800,
+    table-row-hover: #0000002b,
+    disabled: rgba(15, 15, 15, 0.3),
+);
+
+// Foreground palette for light themes.
+$light-theme-foreground-palette: (
+    base: $color-base-blue-grey-a700,
+    divider: rgba(0, 0, 0, 0.12),
+    dividers: rgba(0, 0, 0, 0.12),
+    disabled: rgba(16, 16, 16, 0.3),
+    // disabled-button: rgba(0, 0, 0, 0.26),
+    disabled-text: rgba(0, 0, 0, 0.38),
+    elevation: black,
+    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,
+    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-inverse: $color-base-blue-grey-50,
+    static-light-text: $color-base-blue-grey-50,
+    static-dark-text: $color-base-blue-grey-a700,
+
+    disabled-icon: $color-base-blue-grey-200,
+    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,
+    divider: rgba(255, 255, 255, 0.12),
+    dividers: rgba(255, 255, 255, 0.12),
+    disabled: rgba(255, 255, 255, 0.3),
+    // disabled-button: rgba(white, 0.3),
+    disabled-text: rgba(255, 255, 255, 0.5),
+    elevation: black,
+    hint-text: $color-base-blue-grey-200,
+    secondary-text: rgba(255, 255, 255, 0.7),
+    icon: $color-base-blue-grey-200,
+    icon-active: $color-base-blue-grey-50,
+    icons: white,
+    slider-min: white,
+    slider-off: rgba(255, 255, 255, 0.3),
+    slider-off-active: rgba(255, 255, 255, 0.3),
+    // helper classes
+    text: $color-base-blue-grey-50,
+    text-inverse: $color-base-blue-grey-a700,
+    static-light-text: $color-base-blue-grey-50,
+    static-dark-text: $color-base-blue-grey-a700,
+
+    disabled-icon: $color-base-blue-grey-400,
+    placeholder: $color-base-blue-grey-200,
+    label: $color-base-blue-grey-100,
+);