@inchurch/matcha-theme 20.0.3

package/tokens/_color-tokens.scss

@@ -0,0 +1,1153 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ 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: #EF9A9A;
+$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: #C81010;
+
+$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-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-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-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-blue-50: #E3F2FD;
+$color-base-blue-100: #BBDEFB;
+$color-base-blue-200: #90CAF9;
+$color-base-blue-300: #64B5F6;
+$color-base-blue-400: #42A5F5;
+$color-base-blue-500: #2196F3;
+$color-base-blue-600: #1E88E5;
+$color-base-blue-700: #1664C2;
+$color-base-blue-800: #1565C0;
+$color-base-blue-900: #0D47A1;
+$color-base-blue-a100: #82B1FF;
+$color-base-blue-a200: #448AFF;
+$color-base-blue-a400: #2979FF;
+$color-base-blue-a700: #0A2FC2;
+
+$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-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-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-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: #2E7D32;
+$color-base-green-a100: #b9f6ca;
+$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: #43A047;
+$color-base-light-green-700: #33691E;
+$color-base-light-green-800: #2E7D32;
+$color-base-light-green-900: #1B5E20;
+$color-base-light-green-a100: #CCFF90;
+$color-base-light-green-a200: #B2FF59;
+$color-base-light-green-a400: #A8D94E;
+$color-base-light-green-a700: #64DD17;
+
+$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-yellow-50: #FCF6D9;
+$color-base-yellow-100: #F8EDB3;
+$color-base-yellow-200: #FFB74D;
+$color-base-yellow-300: #EFD54D;
+$color-base-yellow-400: #EBCC26;
+$color-base-yellow-500: #E8C300;
+$color-base-yellow-600: #A64E00;
+$color-base-yellow-700: #C58400;
+$color-base-yellow-800: #AA6600;
+$color-base-yellow-900: #934E00;
+$color-base-yellow-a100: #FFF28B;
+$color-base-yellow-a200: #FFED5D;
+$color-base-yellow-a400: #FFE82F;
+$color-base-yellow-a700: #FFE300;
+
+$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-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-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-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-grey-50: #EFF1F2;
+$color-base-grey-100: #DEE3E6;
+$color-base-grey-200: #C8D0D5;
+$color-base-grey-300: #B2BDC4;
+$color-base-grey-400: #A2AEB7;
+$color-base-grey-500: #91A0AA;
+$color-base-grey-600: #7B8891;
+$color-base-grey-700: #667077;
+$color-base-grey-800: #495055;
+$color-base-grey-900: #33383B;
+$color-base-grey-a100: #FFFFFF;
+$color-base-grey-a200: #E7EDF1;
+$color-base-grey-a400: #C0CEDA;
+$color-base-grey-a700: #98AFC2;
+
+$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-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: #1a1a1a;
+$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 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: $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.
+$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: $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.
+$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 : $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.
+$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: (
+    // Light mode com personalidade sage (2–4% green hue da marca):
+    // sidebar/header   → #E4EBE5 (sage-tinted gray)
+    // content bg       → #F1F4F1 (warm sage off-white)
+    // cards            → #FFFFFF (âncora máxima contraste)
+    // form header/ftr  → #F8FAF8 (near-white com sage subtle)
+    // dropdowns/modals → #FFFFFF + shadow (tint #1A2C1E)
+    background: #F1F4F1,
+    background-inverse: #111318,
+    background-alpha: rgba(#F1F4F1, 0.5),
+    background-alpha-inverse: rgba(#111318, 0.5),
+
+    card: #FFFFFF,
+    card-inverse: #1C1F26,
+    card-alpha: rgba(#FFFFFF, 0.85),
+    card-alpha-inverse: rgba(#1C1F26, 0.5),
+
+    disabled: #CFD6D1,
+    disabled-alpha: rgba(#CFD6D1, 0.5),
+    sidebar: #E4EBE5,
+    sidebar-hover: #D8E1DA,
+    table-row-hover: #EFF5F0,
+);
+
+// Background palette for dark themes.
+// M3-inspired 4-level surface hierarchy (mirrors light mode):
+// container-high (#0D0F14) → sidebar, header, footer
+// container-low  (#111318) → content background
+// container-lowest (#1C1F26) → cards, sections
+// floating (#262A32) → dropdowns, modals
+$dark-theme-background-palette: (
+    background: #111318,
+    background-inverse: #F0F2F5,
+    background-alpha: rgba(#111318, 0.5),
+    background-alpha-inverse: rgba(#F0F2F5, 0.5),
+
+    card: #1C1F26,
+    card-inverse: #FFFFFF,
+    card-alpha: rgba(#1C1F26, 0.5),
+    card-alpha-inverse: rgba(#FFFFFF, 0.5),
+
+    disabled: #282C34,
+    disabled-alpha: rgba(#282C34, 0.5),
+    sidebar: #0D0F14,
+    sidebar-hover: #161920,
+    table-row-hover: #1A1E25,
+);
+
+// Foreground palette for light themes.
+$light-theme-foreground-palette: (
+    base: #1A1D21,
+    base-inverse: #E8EAED,
+
+    foreground: #1A1D21,
+    foreground-inverse: #E8EAED,
+    foreground-alpha: rgba(#1A1D21, 0.5),
+    foreground-alpha-inverse: rgba(#E8EAED, 0.5),
+
+    label: #6B7177,
+    placeholder: #9AA0A6,
+
+    disabled: #CFD6D1,
+    disabled-contrast: #8A9090,
+
+    // Precisa Remover
+    divider: #E1E7E2,
+    dividers: #E1E7E2,
+    // disabled-button: rgba(0, 0, 0, 0.26),
+    disabled-text: #8A9090,
+    elevation: #1A2C1E,
+    hint-text: #6B7177,
+    secondary-text: #4A5056,
+    icon: #5F656B,
+    icon-active: #1A1D21,
+    icons: #4A5056,
+    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: #1A1D21,
+    text-inverse: #FFFFFF,
+    static-light-text: #FFFFFF,
+    static-dark-text: #1A1D21,
+
+);
+
+// Foreground palette for dark themes.
+$dark-theme-foreground-palette: (
+    base: #E8EAED,
+    base-inverse: #1A1D21,
+
+    foreground: #E8EAED,
+    foreground-inverse: #1A1D21,
+    foreground-alpha: rgba(#E8EAED, 0.5),
+    foreground-alpha-inverse: rgba(#1A1D21, 0.5),
+
+    placeholder: #6E747A,
+    label: #BDC1C6,
+
+    disabled: #282C34,
+    disabled-contrast: rgba(#E8EAED, 0.38),
+
+    // Precisa Remover
+    divider: rgba(255, 255, 255, 0.12),
+    dividers: rgba(255, 255, 255, 0.12),
+    // disabled-button: rgba(white, 0.3),
+    disabled-text: rgba(255, 255, 255, 0.38),
+    elevation: black,
+    hint-text: #9AA0A6,
+    secondary-text: rgba(255, 255, 255, 0.7),
+    icon: #9AA0A6,
+    icon-active: #E8EAED,
+    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: #E8EAED,
+    text-inverse: #1A1D21,
+    static-light-text: #FFFFFF,
+    static-dark-text: #1A1D21,
+    disabled-icon: #6E747A,
+
+);