@import '~@angular/material/theming'; $uw-accent: ( 50 : #f8e1e2, 100 : #eeb4b6, 200 : #e28286, 300 : #d65055, 400 : #ce2b30, 500 : #c5050c, 600 : #bf040a, 700 : #b80408, 800 : #b00306, 900 : #a30103, A100 : #ffcece, A200 : #ff9b9b, A400 : #ff6868, A700 : #ff4e4e, contrast: ( 50 : #000000, 100 : #000000, 200 : #000000, 300 : #ffffff, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ) ); $uw-primary: ( 50 : #e1eff5, 100 : #b4d7e5, 200 : #82bcd4, 300 : #4fa1c2, 400 : #2a8db5, 500 : #0479a8, 600 : #0371a0, 700 : #036697, 800 : #025c8d, 900 : #01497d, A100 : #aad6ff, A200 : #77bdff, A400 : #44a5ff, A700 : #2a99ff, contrast: ( 50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ) ); $uw-warn: ( 50 : #fff0e0, 100 : #ffd9b3, 200 : #ffc080, 300 : #ffa64d, 400 : #ff9326, 500 : #ff8000, 600 : #ff7800, 700 : #ff6d00, 800 : #ff6300, 900 : #ff5000, A100 : #ffffff, A200 : #fff5f2, A400 : #ffcfbf, A700 : #ffbca6, contrast: ( 50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ) ); $custom-typography: mat-typography-config($font-family: '"Helvetica Neue", Georgia, Helvetica, Arial, sans-serif'); @include mat-core($custom-typography); $my-app-primary: mat-palette($uw-primary); $my-app-accent: mat-palette($uw-accent); $my-app-warn: mat-palette($uw-warn); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include angular-material-theme($my-app-theme); // Since we're not using uw-style for buttons we need to add a few styles to mirror its appearance. button { text-transform: uppercase; }