Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
17.1.2
Description
I have a custom theme on my Angular project. Everything had worked as expected
However, updating my Angular Material from 17.1.2 to the latest version makes the ripple white and does not work as expected.
Reproduction
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$dark-primary-text: rgba(rgb(106, 106, 106), 0.87);
$dark-secondary-text: rgba(rgb(189, 189, 189), 0.54);
$dark-disabled-text: rgba(rgb(184, 184, 184), 0.38);
$dark-dividers: rgba(rgb(151, 151, 151), 0.12);
$dark-focused: rgba(rgb(205, 203, 203), 0.12);
$light-primary-text: rgb(222, 222, 222);
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$custom-palette: (
50: var(--50),
100: var(--100),
200: var(--200),
300: var(--300),
400: var(--400),
500: var(--500),
600: var(--600),
700: var(--700),
800: var(--800),
900: var(--900),
contrast: (
50: var(--text-contrast),
100: var(--text-contrast),
200: var(--text-contrast),
300: var(--text-contrast),
400: var(--text-contrast),
500: var(--text-contrast),
600: var(--text-contrast),
700: var(--text-contrast),
800: var(--text-contrast),
900: var(--text-contrast),
)
);
$tafari-primary: mat.define-palette($custom-palette, 500);
$tafari-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$typography-config: mat.define-typography-config(
$font-family: '"Open Sans", "Helvetica Neue", sans-serif',
$headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
$headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$headline-4: mat.define-typography-level(34px, 40px, 400),
$headline-5: mat.define-typography-level(24px, 32px, 400),
$headline-6: mat.define-typography-level(20px, 32px, 400),
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
$body-1: mat.define-typography-level(14px, 20px, 400),
$body-2: mat.define-typography-level(14px, 20px, 400),
$subtitle-2: mat.define-typography-level(16px, 28px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$tafari-theme: mat.define-light-theme((
color: (
primary: $tafari-primary,
accent: $tafari-accent,
),
typography: $typography-config,
density: 1,
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($tafari-theme);
@include mat.typography-hierarchy($typography-config);
/* You can add global styles to this file, and also import other style files */
// HTML file
<button (click)="registerForm.valid ? register() : ''" class="w-full" mat-raised-button color="primary">Register
Expected Behavior
Button ripple should be not be white when clicked
Actual Behavior
mat-button ripple is white when clicked
Environment
@angular-devkit/architect 0.1702.3
@angular-devkit/build-angular 17.2.3
@angular-devkit/core 17.2.3
@angular-devkit/schematics 17.2.3
@angular/cdk 17.2.2
@angular/cli 17.2.3
@angular/material 17.2.2
@schematics/angular 17.2.3
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.3