igxButton - Error using theme overrides

[lalo-mx]

Description

Error at build using theme overrides for igxButton

• igniteui-angular version: 18.2.2
• browser: Chrome 130.0.6723.116

Steps to reproduce

1. Download ignitueui-theme-button-fails.zip
2. Run npm install and npm run build

SCSS

$custom-palette: palette(
  $primary: #1766bb,
  $secondary: #0c7a2d,
  $surface: #fff
);
$secondary-text: contrast-color($custom-palette, 'secondary');
$custom-button-theme: button-theme(
  $background: $secondary-text,
  $foreground: #0c7a2d,
  $hover-foreground: #0c7a2d,
  $focus-foreground: #0c7a2d
);

:host ::ng-deep {
  @include css-vars($custom-button-theme);
}

Result

The compilation fails

./src/app/buttons-style/buttons-style.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$color: color-mix(in oklch, var(--ig-secondary-500-contrast) 100%, transparent) is not a color.
    ╷
155 │             $focus-background: color.scale($background, $lightness: 5%);
    │                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\igniteui-angular\lib\core\styles\components\button\_button-theme.scss 155:32  button-theme()
  src\app\buttons-style\buttons-style.component.scss 19:23                                   root stylesheet

Expected result

The compilations works. It may be related to Angular CLI version

Attachments

Attach a sample if available, and screenshots, if applicable.
ignitueui-theme-button-fails.zip
ignitueui-theme-button-works.zip